globuswebcomponents 2.5.4 → 2.5.5

package/dist/collection/components/gb-empty-state/gb-empty-state.js

@@ -3,10 +3,16 @@ export class GbEmptyState {
     constructor() {
         this.size = 'sm';
         this.icon = 'illustration';
+        this.color = 'gray';
+        this.theme = 'system';
+        this.illustrationIcon = '';
         this.background = true;
         this.backgroundType = 'grid';
         this.primaryButtonText = '';
         this.secondaryButtonText = '';
+        this.primaryButtonState = 'default';
+        this.primaryButtonIconLeadingSwap = '';
+        this.isDarkTheme = false;
     }
     onPrimaryButtonClicked() {
         this.primaryButtonClicked.emit();
@@ -14,10 +20,29 @@ export class GbEmptyState {
     onSecondaryButtonClicked() {
         this.secondaryButtonClicked.emit();
     }
+    changeTheme() {
+        if (this.theme === 'system') {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                this.isDarkTheme = true;
+            }
+            else {
+                this.isDarkTheme = false;
+            }
+        }
+        else if (this.theme === 'light') {
+            this.isDarkTheme = false;
+        }
+        else if (this.theme === 'dark') {
+            this.isDarkTheme = true;
+        }
+    }
+    componentWillLoad() {
+        this.changeTheme();
+    }
     render() {
         const circlesLight = getAssetPath(`assets/empty_state_circles_light.svg`);
         const gridLight = getAssetPath(`assets/empty_state_grid_light.svg`);
-        return (h("div", { key: 'ba68288ede0059f15fe6de02da896eec1157a607', class: "overall_container" }, h("div", { key: 'a9bbb9e1f46f1dbaefb27a2bafd3939ac43dddbd', class: `empty_state_wrapper ${this.size}` }, h("div", { key: '7f414b1d6aa818207bbf9472d61e7e69009ddd0f', class: "pattern" }), this.background && (h(Fragment, null, this.backgroundType === 'circles' && h("img", { key: 'eec8d99fa7e7bb039b3b058eb550689db8c8baf5', src: circlesLight, class: `pattern ${this.icon}`, alt: "" }), this.backgroundType === 'grid' && h("img", { key: 'dea2685794336c05fec2cbf8e21dbb8f9b84b3bb', src: gridLight, class: `pattern ${this.icon}`, alt: "" }))), h("div", { key: 'cce0117af984610ebc858c816502e00aa610dd96', class: `top ${this.size}` }, this.icon === 'featured_icon' && h("gb-featured-icon", { key: '708fa8d7c68fdcdf99babf4b05b21a61af9a2521', size: "lg", icon: "assets/search-01.svg" }), this.icon === 'illustration' && (h("gb-illustration", { key: 'fe5ea8586b7776e52ceeed68e37fea563bf599db', size: this.size, color: "primary", "illustration-style": this.illustrationStyle, "illustration-icon": "assets/search-lg.svg" })), this.icon === 'file_type_icon' && (h("div", { key: '9e2baafb9beda905c2949f98e041b9fb466de344', class: "file_type_icon_div" }, h("gb-file-type-icon", { key: '910a4676cce52729e9cd0849f1ff2b4e8a7d21cf', "file-style": "solid", "file-type": "doc" }))), h("div", { key: '774e1d932264662ad39bf562a306636d0903ec85', class: "text_wrapper" }, h("p", { key: '80bbf91cca00988363ec76703702af22cb49f8e8', class: "heading text-md-semi-bold" }, "No projects found"), h("p", { key: '4bb6836e703a22875b97d1335d765a43d4c3cd72', class: "supporting_text text-sm-regular" }, "Your search \u201CLanding page design\u201D did not match any projects. Please try again."))), h("div", { key: 'f477b25e560b98022f6385f5beb5e906e0e6c110', class: "actions" }, this.secondaryButtonText && (h("div", { key: 'fd5dc418c8341ec9ff475a9714492974ee6a89da', class: "btn" }, h("gb-button", { key: '37a4155948dab5289b9d802558ae2cefb2fd13a4', size: "lg", hierarchy: "secondary_gray", icon: "default", "icon-leading": "false", "icon-leading-swap": "assets/logo/filter-horizontal.svg", onClick: () => this.onSecondaryButtonClicked() }, h("p", { key: '03e27b637fdeb92405aba0b2d43bfb0508d1c78e' }, this.secondaryButtonText)))), this.primaryButtonText && (h("div", { key: '54ac69dca880541a75bb9e4b2d8814456e303457', class: "btn" }, h("gb-button", { key: '27d4d8a97317ca3c0bfe63ac0f4007ba50449286', size: "lg", hierarchy: "primary", icon: "default", "icon-leading": "false", "icon-leading-swap": "assets/logo/filter-horizontal.svg", onClick: () => this.onPrimaryButtonClicked() }, h("p", { key: '631637cf15139d9b9ba04bed26d3bc0782383a26' }, this.primaryButtonText))))))));
+        return (h("div", { key: '7ce818745967243008f123de974334c561edc604', class: "overall_container" }, h("div", { key: 'e4a8b8f7ba44c9b0630ce505990e9b29367158a4', class: `empty_state_wrapper ${this.size}` }, h("div", { key: '09b246f3b7a02c2caf71f759fe0a5a1a14a5713f', class: "pattern" }), this.background && (h(Fragment, null, this.backgroundType === 'circles' && h("img", { key: '1e85ea1255a452e223d6e76dcd99e768ce7a2f66', src: circlesLight, class: `pattern ${this.icon}`, alt: "" }), this.backgroundType === 'grid' && h("img", { key: '4a7a039f887d0ff2750f73765313134d43db1233', src: gridLight, class: `pattern ${this.icon}`, alt: "" }))), h("div", { key: '1e2399a163c58615377e9caa0ab480d78a606ff0', class: `top ${this.size}` }, this.icon === 'featured_icon' && h("gb-featured-icon", { key: '3aa5a343f0dd6b8635aec0f9ce73ca4cf8c68a6a', size: "lg", icon: "assets/search-01.svg" }), this.icon === 'illustration' && (h("gb-illustration", { key: 'a20a35bae5cdb9196433d8518198c6e72e426e80', size: this.size, color: this.color, "illustration-style": this.illustrationStyle, "illustration-icon": this.illustrationIcon })), this.icon === 'file_type_icon' && (h("div", { key: '6bff9ca47aa87de3fd1f8d8c3a46c966f2cad260', class: "file_type_icon_div" }, h("gb-file-type-icon", { key: '1821680da121b615e77546ea7684d43ce4d013a4', "file-style": "solid", "file-type": "doc" }))), h("div", { key: '738fbaee043443ac314edcd2af07a7b2ba4a49cb', class: "text_wrapper" }, h("p", { key: 'c3aa623be0d36573b49cd8262b4f0d185b89fe9f', class: "heading text-md-semi-bold" }, "No projects found"), h("p", { key: '4047b7586b816f1ea6e2260992627a2d03436765', class: "supporting_text text-sm-regular" }, "Your search \u201CLanding page design\u201D did not match any projects. Please try again."))), h("div", { key: 'cfbd4f394a578c755139e635509b947ebf1e0abe', class: "actions" }, this.secondaryButtonText && (h("div", { key: 'aa4275b9af4c92f97cc4116fea0f51e91dce5527', class: "btn" }, h("gb-button", { key: '60ec1c7e67b70e1d9189eb316dbbac1ee59149d3', size: "lg", hierarchy: "secondary_gray", icon: "default", onClick: () => this.onSecondaryButtonClicked() }, h("p", { key: '9f8d8dd94443741d9b063fe5f29d2eba51a1adbe' }, this.secondaryButtonText)))), this.primaryButtonText && (h("div", { key: 'a2f635bf7ad38ece0bea2beacae743dd2875275f', class: "btn" }, h("gb-button", { key: '997bf8d5dcd43310968f03ae15e177fa542c0b6e', size: "lg", state: this.primaryButtonState, hierarchy: "primary", icon: "default", "icon-leading": this.primaryButtonIconLeadingSwap ? true : false, "icon-leading-swap": this.primaryButtonIconLeadingSwap, onClick: () => this.onPrimaryButtonClicked() }, h("p", { key: 'f605fec028aec19441a0e22aa2594395091f5db9' }, this.primaryButtonText))))))));
     }
     static get is() { return "gb-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +104,58 @@ export class GbEmptyState {
                 "reflect": false,
                 "defaultValue": "'illustration'"
             },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralColors",
+                    "resolved": "\"default\" | \"discovery\" | \"error\" | \"gray\" | \"information\" | \"pink\" | \"primary\" | \"purple\" | \"success\" | \"warning\" | \"white\"",
+                    "references": {
+                        "GeneralColors": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'gray'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeTypes",
+                    "resolved": "\"dark\" | \"light\" | \"system\"",
+                    "references": {
+                        "ThemeTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ThemeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'system'"
+            },
             "illustrationStyle": {
                 "type": "string",
                 "mutable": false,
@@ -104,6 +181,26 @@ export class GbEmptyState {
                 "attribute": "illustration-style",
                 "reflect": false
             },
+            "illustrationIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "illustration-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "background": {
                 "type": "boolean",
                 "mutable": false,
@@ -183,6 +280,72 @@ export class GbEmptyState {
                 "attribute": "secondary-button-text",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "primaryButtonState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateType",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
+                    "references": {
+                        "StateType": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "primary-button-state",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "primaryButtonIconLeadingSwap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "primary-button-icon-leading-swap",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isDarkTheme": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-dark-theme",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/gb-empty-state/gb-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-empty-state.js","sourceRoot":"","sources":["../../../src/components/gb-empty-state/gb-empty-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, getAssetPath, h, Fragment, Event, EventEmitter } from '@stencil/core';\r\nimport { GeneralSizes, IllustrationTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-empty-state',\r\n  styleUrl: 'gb-empty-state.css',\r\n  shadow: true,\r\n})\r\nexport class GbEmptyState {\r\n  @Prop() size: GeneralSizes = 'sm';\r\n  @Prop() icon: 'featured_icon' | 'illustration' | 'file_type_icon' = 'illustration';\r\n  @Prop() illustrationStyle: IllustrationTypes;\r\n  @Prop() background: boolean = true;\r\n  @Prop() backgroundType: 'grid' | 'circles' = 'grid';\r\n  @Prop() primaryButtonText: string = '';\r\n  @Prop() secondaryButtonText: string = '';\r\n  @Event() primaryButtonClicked: EventEmitter<void>;\r\n  @Event() secondaryButtonClicked: EventEmitter<void>;\r\n\r\n  onPrimaryButtonClicked() {\r\n    this.primaryButtonClicked.emit();\r\n  }\r\n\r\n  onSecondaryButtonClicked() {\r\n    this.secondaryButtonClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    const circlesLight = getAssetPath(`assets/empty_state_circles_light.svg`);\r\n    const gridLight = getAssetPath(`assets/empty_state_grid_light.svg`);\r\n\r\n    return (\r\n      <div class=\"overall_container\">\r\n        <div class={`empty_state_wrapper ${this.size}`}>\r\n          <div class=\"pattern\"></div>\r\n          {this.background && (\r\n            <>\r\n              {this.backgroundType === 'circles' && <img src={circlesLight} class={`pattern ${this.icon}`} alt=\"\" />}\r\n              {this.backgroundType === 'grid' && <img src={gridLight} class={`pattern ${this.icon}`} alt=\"\" />}\r\n            </>\r\n          )}\r\n          <div class={`top ${this.size}`}>\r\n            {this.icon === 'featured_icon' && <gb-featured-icon size=\"lg\" icon=\"assets/search-01.svg\"></gb-featured-icon>}\r\n            {this.icon === 'illustration' && (\r\n              <gb-illustration size={this.size} color=\"primary\" illustration-style={this.illustrationStyle} illustration-icon=\"assets/search-lg.svg\"></gb-illustration>\r\n            )}\r\n            {this.icon === 'file_type_icon' && (\r\n              <div class=\"file_type_icon_div\">\r\n                <gb-file-type-icon file-style=\"solid\" file-type=\"doc\"></gb-file-type-icon>\r\n              </div>\r\n            )}\r\n            <div class=\"text_wrapper\">\r\n              <p class=\"heading text-md-semi-bold\">No projects found</p>\r\n              <p class=\"supporting_text text-sm-regular\">Your search “Landing page design” did not match any projects. Please try again.</p>\r\n            </div>\r\n          </div>\r\n          <div class=\"actions\">\r\n            {this.secondaryButtonText && (\r\n              <div class=\"btn\">\r\n                <gb-button\r\n                  size=\"lg\"\r\n                  hierarchy=\"secondary_gray\"\r\n                  icon=\"default\"\r\n                  icon-leading=\"false\"\r\n                  icon-leading-swap=\"assets/logo/filter-horizontal.svg\"\r\n                  onClick={() => this.onSecondaryButtonClicked()}\r\n                >\r\n                  <p>{this.secondaryButtonText}</p>\r\n                </gb-button>\r\n              </div>\r\n            )}\r\n            {this.primaryButtonText && (\r\n              <div class=\"btn\">\r\n                <gb-button\r\n                  size=\"lg\"\r\n                  hierarchy=\"primary\"\r\n                  icon=\"default\"\r\n                  icon-leading=\"false\"\r\n                  icon-leading-swap=\"assets/logo/filter-horizontal.svg\"\r\n                  onClick={() => this.onPrimaryButtonClicked()}\r\n                >\r\n                  <p>{this.primaryButtonText}</p>\r\n                </gb-button>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-empty-state.js","sourceRoot":"","sources":["../../../src/components/gb-empty-state/gb-empty-state.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, getAssetPath, h, Fragment, Event, EventEmitter } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes, IllustrationTypes, StateType, ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-empty-state',\r\n  styleUrl: 'gb-empty-state.css',\r\n  shadow: true,\r\n})\r\nexport class GbEmptyState {\r\n  @Prop() size: GeneralSizes = 'sm';\r\n  @Prop() icon: 'featured_icon' | 'illustration' | 'file_type_icon' = 'illustration';\r\n  @Prop() color: GeneralColors = 'gray';\r\n  @Prop() theme: ThemeTypes = 'system';\r\n  @Prop() illustrationStyle: IllustrationTypes;\r\n  @Prop() illustrationIcon: string = '';\r\n  @Prop() background: boolean = true;\r\n  @Prop() backgroundType: 'grid' | 'circles' = 'grid';\r\n  @Prop() primaryButtonText: string = '';\r\n  @Prop() secondaryButtonText: string = '';\r\n  @Prop() primaryButtonState: StateType = 'default';\r\n  @Prop() primaryButtonIconLeadingSwap: string = '';\r\n  @Prop() isDarkTheme: boolean = false;\r\n  @Event() primaryButtonClicked: EventEmitter<void>;\r\n  @Event() secondaryButtonClicked: EventEmitter<void>;\r\n\r\n  onPrimaryButtonClicked() {\r\n    this.primaryButtonClicked.emit();\r\n  }\r\n\r\n  onSecondaryButtonClicked() {\r\n    this.secondaryButtonClicked.emit();\r\n  }\r\n\r\n  changeTheme() {\r\n    if (this.theme === 'system') {\r\n      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n        this.isDarkTheme = true;\r\n      } else {\r\n        this.isDarkTheme = false;\r\n      }\r\n    } else if (this.theme === 'light') {\r\n      this.isDarkTheme = false;\r\n    } else if (this.theme === 'dark') {\r\n      this.isDarkTheme = true;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.changeTheme();\r\n  }\r\n\r\n  render() {\r\n    const circlesLight = getAssetPath(`assets/empty_state_circles_light.svg`);\r\n    const gridLight = getAssetPath(`assets/empty_state_grid_light.svg`);\r\n\r\n    return (\r\n      <div class=\"overall_container\">\r\n        <div class={`empty_state_wrapper ${this.size}`}>\r\n          <div class=\"pattern\"></div>\r\n          {this.background && (\r\n            <>\r\n              {this.backgroundType === 'circles' && <img src={circlesLight} class={`pattern ${this.icon}`} alt=\"\" />}\r\n              {this.backgroundType === 'grid' && <img src={gridLight} class={`pattern ${this.icon}`} alt=\"\" />}\r\n            </>\r\n          )}\r\n          <div class={`top ${this.size}`}>\r\n            {this.icon === 'featured_icon' && <gb-featured-icon size=\"lg\" icon=\"assets/search-01.svg\"></gb-featured-icon>}\r\n            {this.icon === 'illustration' && (\r\n              <gb-illustration size={this.size} color={this.color} illustration-style={this.illustrationStyle} illustration-icon={this.illustrationIcon}></gb-illustration>\r\n            )}\r\n            {this.icon === 'file_type_icon' && (\r\n              <div class=\"file_type_icon_div\">\r\n                <gb-file-type-icon file-style=\"solid\" file-type=\"doc\"></gb-file-type-icon>\r\n              </div>\r\n            )}\r\n            <div class=\"text_wrapper\">\r\n              <p class=\"heading text-md-semi-bold\">No projects found</p>\r\n              <p class=\"supporting_text text-sm-regular\">Your search “Landing page design” did not match any projects. Please try again.</p>\r\n            </div>\r\n          </div>\r\n          <div class=\"actions\">\r\n            {this.secondaryButtonText && (\r\n              <div class=\"btn\">\r\n                <gb-button size=\"lg\" hierarchy=\"secondary_gray\" icon=\"default\" onClick={() => this.onSecondaryButtonClicked()}>\r\n                  <p>{this.secondaryButtonText}</p>\r\n                </gb-button>\r\n              </div>\r\n            )}\r\n            {this.primaryButtonText && (\r\n              <div class=\"btn\">\r\n                <gb-button\r\n                  size=\"lg\"\r\n                  state={this.primaryButtonState}\r\n                  hierarchy=\"primary\"\r\n                  icon=\"default\"\r\n                  icon-leading={this.primaryButtonIconLeadingSwap ? true : false}\r\n                  icon-leading-swap={this.primaryButtonIconLeadingSwap}\r\n                  onClick={() => this.onPrimaryButtonClicked()}\r\n                >\r\n                  <p>{this.primaryButtonText}</p>\r\n                </gb-button>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-export-dropdown/gb-export-dropdown.css

@@ -2751,12 +2751,12 @@
     position: absolute;
     top: 2rem;
     left: -10rem;
-    z-index: 999;
+    z-index: 9999999;
 }
 
 .second_dropdown{
     position: absolute;
     top: 4rem;
     left: -10rem;
-    z-index: 999;
+    z-index: 9999999;
 }

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

@@ -19,8 +19,14 @@
   width: 9.5rem;
 }
 
+.illustration_div{
+  padding-top: var(--spacing-4);
+}
+
 .cloud,
-.box {
+.box,
+.documents,
+.credit_card {
   position: absolute;
 }
 
@@ -66,6 +72,48 @@
   top: -0.1rem;
 }
 
+.documents.sm {
+  width: 9.75rem;
+  height: auto;
+  left: -0.2rem;
+  top: 1rem;
+}
+
+.documents.md {
+  width: 10.25rem;
+  height: auto;
+  left: 0.2rem;
+  top: 1rem;
+}
+
+.documents.lg {
+  width: 13.25rem;
+  height: auto;
+  left: 0.2rem;
+  top: 1.3rem;
+}
+
+.credit_card.sm {
+  width: 8.55rem;
+  height: auto;
+  left: 0.5rem;
+  top: 1.5rem;
+}
+
+.credit_card.md {
+  width: 9.85rem;
+  height: auto;
+  left: 0.4rem;
+  top: 1.5rem;
+}
+
+.credit_card.lg {
+  width: 12.55rem;
+  height: auto;
+  left: 0.7rem;
+  top: 2.1rem;
+}
+
 .icon_div {
   display: flex;
   justify-content: center;

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: 'f38bba33a8affaafb8573713c2489dbef64675a4', class: `illustration_wrapper` }, h("svg", { key: '50a51e3fedda6d869a990157663f776da9374379', 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: '1742cb5746009129311d08a83ebd94f49139d935', 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: 'c723bcb06fab1937609bf36edc7e94345cc40a2d', 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: '0f5dd9e108d92ca1869f8360c4467fa023dfccb8', 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: 'ddf5225ac7fb67ddb1a21607ee957e3e43405552', 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: '4a6f111b3bde250f28ee4aaa51ae0df9e3e9c41a', 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: 'c4f5ca883bb96541cd42072aac43d9461df9c4a6', 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: '6005bca113d4e90a4444fad7526f5b1903ac8594', class: "illustration_div" }, h("div", { key: '76b9d295244e3fa0251d24dde39692906a06b3a8', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: 'fa817780b6c8464c718e3b4a414b0335d34e6371', 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: '9c99509ff4619e8a5b0e0c788e5b4384f9d8c247', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '2d91e3e1f672242eaf6b9399b6700b93f8f6c2ab', 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: "var(--color-background-information-subtlest, #E4F0FC)" }), h("circle", { key: '5e5cd85b8cbb7f02a63b43b3051956166d654079', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '71400fcde2db0cc8e08586bb2ee21edbebf00065', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '6f16a3c91b6cd822094c22dfd81e1fd020c5f27b', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '52d8b152dcb22340b61be902528322d29191d832' }, h("filter", { key: '107ae9fb75c744a074407a1d77b8dd2f8097feac', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '5cf1987460359d1405932ab8f57015478e8eeac7', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e059ccadd79c7124e26dbb107138559144742121', 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: '2dc7957667c8090bfa185d80b5fda19380319350', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '74e23ffbd435ed6b9d430ebfa12835bd897d4684', dy: "8" }), h("feGaussianBlur", { key: 'fa1e8058d86376a6585956dd88c25a883a71ffea', stdDeviation: "4" }), h("feColorMatrix", { key: 'ba6be93efaf07d4050cadcc8ee490263ecb9cef1', 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: '1bff93866fba84980435e171e23188d0f6c4f243', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: '14d87fe21007d5bfd0e49d8d4147199fba76a962', 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: '85dd7af2e4194b4a3987c99c31ffe9ea66ad58d6', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: 'ccdcae8b881cd9e3f91006325a742277feccffd4', dy: "20" }), h("feGaussianBlur", { key: '48852ca5bb657be73d318d46c98ed716bdba52c7', stdDeviation: "12" }), h("feColorMatrix", { key: 'b91b790d9b345a54e7027073d7659f5c30529532', 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: '08a6dda939a2a3412f308743648e000d0400eb07', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: '7261130fca2a2cb239b9128c59283e76a42371ae', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '1a642b2cd7defc420e9bb52670161fe1e18d31e5', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd298195350cf4f87f46f7f5e46db0944cef0a08c', "stop-color": `${this.color === 'primary'
-                ? 'var(--color-background-information-subtle, #9AC7F4)'
+        return (h("div", { key: 'c6084ed73da309543c2ef96cbd031475192202c1', class: `illustration_wrapper` }, h("svg", { key: 'b374ac3d95f40a7c22ce1f7691398558f73d45fe', 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: '37983537f4c0bb1025ef74aff725b5393ec44cfc', 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: 'a067b0d3924877af22b220eb7936414281db8b85', 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: 'f350c9838a2cda377e4752ce00663d73d7017c9f', 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: '1d4db257d98e0c01a6edc9e1546ff90964e6aea1', 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: 'e1c5b980c8bd6b2b6d5f817b179eaba5802b3240', 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: 'c516f64d8a1d0cbb9cfcca6b27a2c0c8a2dd935f', 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: 'dee13fb91207899d101949894988db4d37eed4d7', class: "illustration_div" }, h("div", { key: '2ed9af4d9b4890240dd7eb01ee0a8824b6f80cf8', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: 'dae229273bf6630d888023f9bc11d9c51a578e26', 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: 'b7c77de68b4354c691eab716e3866c8b5020444c', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '7d52d264f0df2471a26ea365b4803e5f5951280e', 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: '93ed30a04d0bde2d524e51e2b6ecec819da9c2c1', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: 'cc3838c4fb8681a82ea3e26318e7ceaba835e989', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '84a10e01d88b2b22848e45f19c1702f425f699a4', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '4f0e6e0c7e8bf57246dbd7b5b52c785f8778f076' }, h("filter", { key: '8fc270ebabf48892b82b39fc56d9e1deb88e489b', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '44f5160ea67ad0ccfcb314d725b54740cfb1b20b', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'a84c631a6995a00c70b76bee5aa11883bf2ca8fb', 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: '88b2c235b2a3aa6d8668eb2d946311b116bf47e9', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '43a85506cad7b53c4d6095800a219b1526df0473', dy: "8" }), h("feGaussianBlur", { key: '758f96ec1f0ab151af6212a94faf127d5be2206b', stdDeviation: "4" }), h("feColorMatrix", { key: '31a20d7ee8522a23fc988277facbc5ffe18f4bf4', 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: 'ea94583151566855f1aa94488f23b592b4da4b28', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: 'ba41d19a01e29e3b8c4eb5d65acca40c5f2c5862', 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: '7616064697739952f91536fcac88520a182c0796', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '4429926d0639b22e12603268e319c89a9c9ba293', dy: "20" }), h("feGaussianBlur", { key: '34ad88e552ddd735f2c675cff9170c6b94f8e670', stdDeviation: "12" }), h("feColorMatrix", { key: 'b352b9feb4f4426ca801e78fa05cdd4bea736a5e', 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: '0763adf187367d5fd13800f6204bf16b32f8f140', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: '56796eed98fa742631a3a1c5ef348abe40c12864', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: 'fac139cc65b427777b71859116ee3c5e5bbc4a07', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a2445a8c6c96070ba90933943a66789eebe81b8d', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '6aa68e87de4566d346ad545f851654c8771eceb5', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '0a841e9304b2787b1f5de88e19ccf46779b48dbd', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b37cd7ebf440ff3e31d43f36a25044072fcbc03a', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'bdd7080dc637bdd27dcad11a1e37e298632d34fe', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '6c8b293f075a0641df831ad29263c648fd52faee', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '19dd5063c9cf7ea75a67d241f45ac40dff879131', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'e97ddd19da5cf35303d908feb249a528ffaff5a1', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: '0d64a9550a19f5e4632ce06458837dc9c7fd6fb8', 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: '36ae3c700a4253265b7de7c6531a318b8b3a7017', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: '4c9c96eeabf338bb89b2a0a00adbb34e719a70b5', 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: 'eb4c532ccddbdef062830d8fee2ea58105345f21', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: 'a45f17ed369022472fbed4438a372c8dfbc7e050', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: 'f1debebb7eb1b89ea42d0d817d243c5e0e7bc2b4', 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: '44cc0140288163b11a21c971ab9c2c2674cfee5b', 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: '3959b07657c5e551b4d253bdeec0288831028fed' }, h("filter", { key: '7fdf163cf10279403169f6af194d657c5b4cd2f1', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '45a030261616e52a85b4ed89a91020480dba1680', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e50c92b28e368b6de6dc7d1ecf743f0ccf5ab83a', 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: '41d32622e816480c845d4f40c9757f0783d8c4b5', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '4022f64717b1ea5aabca6bb9c9a0e73b9b112973', dy: "8" }), h("feGaussianBlur", { key: '9c005921bf8be6ffe7788bd5eb93253a39fafdf5', stdDeviation: "4" }), h("feColorMatrix", { key: 'fdcd007727fdd8fb760fe06b3b96738f25558b95', 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: '25c2376fc24e7c8468fdef46ddb1eb67e3b1ddb9', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '2a1d3b4b6568ed0d5daa10fe95cc52fbba16e4b5', 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: '7da9ec8e10e0a046cb20b2a918ed3b916e37860b', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'df9b26ecec4b72e865d88e4896eb9057237586ca', dy: "20" }), h("feGaussianBlur", { key: 'c97216bd2580e9b338812a95adba9cc9b1654c1b', stdDeviation: "12" }), h("feColorMatrix", { key: 'd7071c3d20d389797f482ab78ef73daf4904ab47', 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: 'c470bf6f43a0a969286c5a2eb248492c6d1c613c', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: 'a6b1f458104599e80a0a571792834ccbf1823834', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: 'abc4a655db5af1e992a103cf3ade455c797b4444', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'ad8c0f3309e2d74b2b6fd89dea021bddb3e64705', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '70a7e390dbe53e1059b557eafd0ef405520a758b', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` }), h("stop", { key: 'cbc82b6c61a3330a2a7d680886cd218680441527', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'ddf93fdd0ec4d1d8776c5efa749cbdef733c9559', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '976a35c5d99692c2fb52b9e16719ccc449931077', "stop-color": `${this.color === 'primary'
-                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                    : ''}` })), h("linearGradient", { key: '268c51465eb1137fea06b0bf5462712512820024', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '8253e1cd632401fe59187c746f29dd765b814d16', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '974f8fd2d58b1ced2832d7e2a8162ce1f94df741', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
                     ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` }), h("stop", { key: 'a2f33ca6c06c63760c2100f80e9696082f667f1a', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'feebf297cd1a73b1ae30f0b67c2a55f2ccaee81d', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '87379e6e117985078688c8a72761ab32e88e3774', "stop-color": `${this.color === 'primary'
-                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                    : ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: '2fdf5e8ae8e0a3049aed3252ea8a7455fc8c6763', 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: '17eeef75210744dbb168513a96df9184a52f9089', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: '5d411ccad0b6db491f4f18e5c0df04874308798b', 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: '11842967a7cabbced5a2ba0401f2bd6dd1d52cec', 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: '9c948999cbe9cc67afa3ab59cdca963e82dec39c', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: '61bff854e9dafd985f1fbebec7dfcf86926d3445', 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: '2ced412276704bdce127843a75b79597a72b31ae', 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: 'a2fa932519608a727a0f9f4bd712f09c6a75bb36', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: '7447208666e8484c6843da6266bfaa0c798e3bf0', 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: 'fb54162d128a08cd94a14825fcfba52e15a7cd2e', 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: 'ee99c439a38eaa5dc5c1edc961591bb2bad180db' }, h("filter", { key: 'b817f5644638d698b2825c0f9cf18cb6420ae27f', 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: '1d4f3f91ae6f4331c614d7c5d0559a0acd97f5f7', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e18f135cbbd63d2cf70b3595af9fed96f857db33', 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: '71b6552c7e9e93417c7c84c529e9e07f4707263a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'a077392b2f2efbd36d472a689978b6a62f28a089', dy: "8" }), h("feGaussianBlur", { key: '78d938cae866d603db1f894eba160f46e55a903f', stdDeviation: "4" }), h("feColorMatrix", { key: 'a2ebd3fe4c4c60ebabe26b3852704db68ce645e0', 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: '921253621612acdeb835d368a83ad83b7cad9a5d', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '1b92d23ad025e2f549ce197b13c371a9d84b2534', 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: '854d362f2480393df95444af19c41b4d1a4059b5', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'c337b8ccfc24857dbbb81dc0df8d27c754b8e797', dy: "20" }), h("feGaussianBlur", { key: '0c41efe44a0aff0d18a55c8387c019c34ff8ce90', stdDeviation: "12" }), h("feColorMatrix", { key: '77c505191cf3fa80953c15c617e3bc88504a2f1c', 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: 'a4e9a0ec2aa7820d7445fce404682d4439c182f4', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '2bc04146cc34cbbe13ea144a49c991bc08f83d98', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'dc85405b51c4bab8bd4d13677d10343eeeeb6d0d', 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: '39c1b3095a13219ba14c682f572e6a2e47d61e93', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'aac7a1871d9712ecbc596d6b034bdb53832f7f75', 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: '773bb11d851c01c34fc1b809f393fece60d0cadf', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '5eaf7ba179fc4ea8e3299cd91684d3fe60c7bfad', dy: "8" }), h("feGaussianBlur", { key: 'e508b3495c392fab0f2cb3854406817e3921ea56', stdDeviation: "4" }), h("feColorMatrix", { key: '8be5c7e7b6e7d23d77b5999ebc2ae8189550b849', 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: '6b199f28867a1405241301bd5a8781977bddcafd', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'd3465a39ab4e59be16e0f96d82680632e2e7dada', 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: '166b421c4222e9a92e218718bbafbb6448a847fd', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '8707c80dd823158a7e4050d40300e5bea65cebd0', dy: "20" }), h("feGaussianBlur", { key: 'a7abbd36f51034b7901eefdaefe3f029c39d189f', stdDeviation: "12" }), h("feColorMatrix", { key: '20bd5398008c17530288029d0fd87d7089c6a7d1', 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: 'ec6b8e3a8c954b2dfcbefcbd888edc4fc8af1dd6', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: 'e026b4cd1681dba41399d7229a0118b679d5589b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '63ef424c81918bb2f067994c33f17bca588b824d', 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: 'ce628871032b033a1f33ca5aa99da923c0f0bfcb', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'c31081e33dedf974d58d129c7848ec0d69e326c7', 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: '89ae47cfe9e3ef63cc1a0be92c7d2474c82b4096', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '19cbb98882464b98d16932b4b71968832a9235c7', dy: "8" }), h("feGaussianBlur", { key: '06e0a2141f0c943b90a08d755cd1ccecf3f4cf42', stdDeviation: "4" }), h("feColorMatrix", { key: '714f97c7040c57bac55af3fc6eae816df694671f', 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: 'cc3d2c9f0fd5678ceaabd138e4b0a7a9386ffcd7', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'c8e72eb072d1bbe1df40788c81b9b239b6e734d5', 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: '69f5db2532fa1bd7b1f6fbdd5f9dd77ea3329ab0', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: 'd72d8d224d1c9334b14717555e7dcac98f57ba5e', dy: "20" }), h("feGaussianBlur", { key: '2d1fd426390d0949955c053cd41f99b556280f52', stdDeviation: "12" }), h("feColorMatrix", { key: 'e236bbea6eb3d3c0484570d4cdd088977b4e85c7', 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: '41e505ff622efea2300305b4e57f7c2eda678d81', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '0613a82f2143fce4cb20a33da943d90192c1eb00', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: '513f5cb4fd66777c32d4f4bdb41205d4b72c3311', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '7d42be0691ad9863f6827c48e5c129c80a455a65', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'c9a9e4daee223c49cf1c3c949f5be1e38659ecf6', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
-                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` }), h("stop", { key: '29ed0e49609c354918990870a589561140fe1df2', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'a577641f58324c9e4c5393a5b6d759e1f8c19b29', 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: 'a36ea4956e1e294eda8bcca38d76a68858ebabc5', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: '7604464f347070fd72d1834f0b0bb91830b2b64b', 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: 'eb2f3be6fef17b49801a83ef3b492d605449f4e3', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '98320c2f03ab418966f7b2e72a70f92428bbbd2f', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '6a7b25a7a786b4dd1d7d031fd310841b4fd6869a', d: "M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z", fill: "var(--color-background-information-subtler, #C8E0F9)" }), h("path", { key: 'ab76c539db3b27a447d46be430060833a78c5844', d: "M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z", fill: "var(--color-background-information-subtlest, #E4F0FC)" })), h("defs", { key: 'e164b3bf990f505d49a3e0103b9d48ce2855f3c5' }, h("filter", { key: '9e5ea90bcd07a665ab0420ec7cb02d9e8524fc25', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '30774637d56b746fca58dc09c6dd82035c2095db', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '7facb514be14b23080b1c2bc92a81e0b5815b8d5', 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: 'c1955351a98d1cdd063e43c6d3b50e672bd6581a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '1fe9266a523f61b3c83d0fe6a47ca5da201996fb', dy: "8" }), h("feGaussianBlur", { key: 'bc9f67770caf8badd3e389d081633fe16ad5885e', stdDeviation: "4" }), h("feColorMatrix", { key: 'e907f4ae50f272d0a58f3834f12f95912763f7fb', 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: '89f7168fa9827014ef77c0769ed52bcb1a7bf2de', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '10ba693ce1291488e6364b66c58ccb0ca28f5ff7', 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: 'b26e58aef747502cccc00ae95ebe6576925ecfef', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'ed350bc69b6f3e0f07af322e96f947700fe706bd', dy: "20" }), h("feGaussianBlur", { key: '1a28f2976b40387741df80dc324aa402e43c940f', stdDeviation: "12" }), h("feColorMatrix", { key: 'ebd64d5edc1ab69b4766eff706222d6ab24a1bf8', 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: '3cb6cfdc83317c6711509b58fae038d1a965bab0', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: '386b0642859907b10674ede45fab43c394a3fb8b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '3a0f45e2f70193bc6059a1862b2b7ad79faa6b90', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '10d15712854b149abc2615c4c0481c2976b5a021', "stop-color": `${this.color === 'primary'
-                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                    ? 'var(--color-background-gray-subtlest, #F6F8FA)'
+                    : ''}` })), h("linearGradient", { key: 'bb857e0cd97aa6181cf8180e5f2ce5ecbdc1dc4b', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'ac662855f90007f70738efd014a4219519afd182', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: 'dbfcc8714cf6e162b5a9a0f3c93c095f0f288945', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
-                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` }), h("stop", { key: 'b10c6bd09e3e4846b0f4e559d24ca804b4d346a6', offset: "1", "stop-color": `${this.color === 'primary'
-                ? 'var(--color-background-information-subtler, #C8E0F9)'
+                    ? 'var(--color-background-gray-subtlest, #F6F8FA)'
+                    : ''}` })), h("linearGradient", { key: 'f2ba86b122736b99c83237e4b779d51eac857436', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '6dfd135328b3ea422d1d260bdb35dd5befbd47ec', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '6b8d07755b0607325b51450e4d9efae7dd879ac6', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtlest, #E4F0FC)'
                 : this.color === 'gray'
-                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` })), h("linearGradient", { key: '55f65d9cd2f58bafb5756f98abfda5792c38d959', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '48b98e5d859a591d1c4a76cb9439c860e2e759ff', "stop-color": `${this.color === 'primary'
-                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                    ? 'var(--color-background-gray-subtlest, #F6F8FA)'
+                    : ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: '79da4b6ef4649148acecfc0202d8b65f9ce337b4', 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: 'a0938d0aa17986210770f36810ecea6d4b6f4720', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: '35a8dc5f9ad28eec0747fb181bbb76fe94169a02', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: '4ae26cd80adb7eb0bd1e3634f976e38f5cac5217', 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: '48b32b31aa4ad172768e970e672b8372b7e656db', 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: '4ab27d6f05381f763be7d360d131f47cbdc5242e', 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-subtler, #EEF2F6)'
-                    : ''}` }), h("stop", { key: '083fcc3f4fbfc0f065c7c795b39362f0372492f7', offset: "1", "stop-color": `${this.color === 'primary'
+                    ? 'var(--color-background-gray-subtle, #E3E8EF)'
+                    : ''}` }), h("path", { key: '46abf11543d69f55f288012d74b909769cae3e4c', 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: '863350be7f14542fe29ee10a6b7034b3f34e3184', 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: '36006b9fb33e9207fd0e2a83bac01c348b2d2248', 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: 'ac31cb0396fb9f6f29cb980dafe3cddbc74d45a7', 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: 'efb9d3c0f3d222bd6c12083080e9cdea579dbfb1' }, h("filter", { key: '0bd3c9f13c3b4f24e057c86970bfc6b92353fcfb', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '53f0fed0935663fb40acbc97b7ef03e99ca77c20', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'ccf01d2d2d4d2f3245dbf186b442f71ea477aa64', 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: '86d31675ab2e55bb96886d3223d2573dcf66a7fa', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: 'f0c467d38422473ed900b1794c3df878efbc2408', dy: "8" }), h("feGaussianBlur", { key: 'ce180d86a4751120fc7e726cb267b8619861f01c', stdDeviation: "4" }), h("feColorMatrix", { key: '892ba26304e9677140204f946b38dbb9d230b831', 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: '0de63b30de72605d85d715b7e0ec1f612f915398', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: 'ce4da625218ea58bf63cac7564c59d4b7c00dbcb', 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: 'e0bfc434e7b4177a394d5a065cb3a554482b0261', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: '1b31dc1e693faed6fbeee2f779711bd912fdd7bc', dy: "20" }), h("feGaussianBlur", { key: '017d5b8b3f7b74c43647a3c7f47f5027d0440dc8', stdDeviation: "12" }), h("feColorMatrix", { key: '4d02ba2619b206f819766fb43394390a36afaebb', 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: '6313bf59489f4c86ba1019ee2012cce1a3a0e885', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: '9bfe79e9cb098dbdb9a1a079a5912d200c9fff61', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: '6469633237aec099f14efba2bad4f786d470e147', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '1ea239ab025574c73d36c36cf27404f410cc7bc4', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: 'f20a31ece27e47ed4dcd8577077374e99ff9d6de', offset: "1", "stop-color": `${this.color === 'primary'
                 ? 'var(--color-background-information-subtler, #C8E0F9)'
                 : this.color === 'gray'
-                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
-                    : ''}` })))))), h("div", { key: '7c751048e53318359fcb3ffd90caf462819f8e2a', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '35fc9066f6dfe8a329f74429d8610172cd557d3d', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
+                    ? 'var(--color-background-gray-subtlest, #F6F8FA)'
+                    : ''}` })))))), h("div", { key: 'a6fd931a75abab424ff456c05b40f6cd201f107b', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '45c1045eb63f825be3a3af3a481b75153f7f837b', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-illustration"; }
     static get encapsulation() { return "shadow"; }