@corto-ai/gds-angular 2.1.5-test.1 → 2.1.5-test.2

package/fesm2022/corto-ai-gds-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, makeEnvironmentProviders, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
+import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, numberAttribute, afterRenderEffect, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, makeEnvironmentProviders, TemplateRef, HostListener, provideAppInitializer, NgModule } from '@angular/core';
 import { injectRegisterIcons, SvgIconRegistry, SvgIconComponent, provideSvgIconsConfig } from '@ngneat/svg-icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@ngneat/helipopper';
@@ -96,6 +96,10 @@ const gdsBrandGearIcon = {
     data: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.06 15.1627H22.1122C21.8932 14.2575 21.537 13.41 21.0652 12.6368L22.443 11.259C23.0062 10.6957 23.0062 9.78525 22.443 9.222L21.528 8.307C20.9647 7.74375 20.0542 7.74375 19.491 8.307L18.1132 9.68475C17.34 9.213 16.4925 8.856 15.5872 8.63775V6.69C15.5872 5.895 14.9422 5.25 14.1472 5.25H12.8535C12.0585 5.25 11.4135 5.895 11.4135 6.69V8.63775C10.5082 8.85675 9.66075 9.213 8.8875 9.68475L7.50975 8.307C6.9465 7.74375 6.036 7.74375 5.47275 8.307L4.55775 9.222C3.9945 9.78525 3.9945 10.6957 4.55775 11.259L5.9355 12.6368C5.46375 13.41 5.10675 14.2575 4.8885 15.1627H2.94C2.145 15.1627 1.5 15.8077 1.5 16.6027V17.8965C1.5 18.6915 2.145 19.3365 2.94 19.3365H4.88775C5.10675 20.2417 5.463 21.0892 5.93475 21.8625L4.557 23.2402C3.99375 23.8035 3.99375 24.714 4.557 25.2772L5.472 26.1922C6.03525 26.7555 6.94575 26.7555 7.509 26.1922L8.88675 24.8145C9.66 25.2862 10.5075 25.6432 11.4127 25.8615V27.8092C11.4127 28.6042 12.0577 29.2492 12.8527 29.2492H14.1465C14.9415 29.2492 15.5865 28.6042 15.5865 27.8092V25.8615C16.4917 25.6425 17.3392 25.2862 18.1125 24.8145L19.4902 26.1922C20.0535 26.7555 20.964 26.7555 21.5272 26.1922L22.4422 25.2772C23.0055 24.714 23.0055 23.8035 22.4422 23.2402L21.0645 21.8625C21.5362 21.0892 21.8932 20.2417 22.1115 19.3365H24.0592C24.8542 19.3365 25.4992 18.6915 25.4992 17.8965V16.6027C25.5 15.8077 24.855 15.1627 24.06 15.1627ZM13.4662 21C11.3947 21 9.71625 19.3215 9.71625 17.25C9.71625 15.1785 11.3947 13.5 13.4662 13.5C15.5377 13.5 17.2162 15.1785 17.2162 17.25C17.2162 19.3215 15.5377 21 13.4662 21Z" fill="var(--gds-pattern-brandIcon-fill-primary)"/><path d="M11.256 11.6722C9.49654 12.372 8.14354 13.881 7.65979 15.7372" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.3" d="M12.8527 5.25C12.0577 5.25 11.4127 5.895 11.4127 6.69V8.63775C10.5075 8.85675 9.66 9.213 8.88675 9.68475L7.509 8.307C6.94575 7.74375 6.03525 7.74375 5.472 8.307L4.557 9.222C3.99375 9.78525 3.99375 10.6958 4.557 11.259L5.93475 12.6368C5.463 13.41 5.106 14.2575 4.88775 15.1628H2.94C2.145 15.1628 1.5 15.8078 1.5 16.6027V17.8965C1.5 18.1943 1.59075 18.4703 1.74525 18.6998C2.1225 18.8273 2.51925 18.912 2.94 18.912H4.8885C6.6225 18.912 8.12925 17.724 8.53425 16.038C8.6565 15.531 8.859 15.0435 9.1365 14.5883C9.37125 14.202 10.455 13.1198 10.8412 12.8843C11.2927 12.6083 11.7817 12.4058 12.2947 12.282C13.9777 11.8748 15.1627 10.3688 15.1627 8.637V6.69C15.1627 6.27 15.078 5.8725 14.9505 5.49525C14.721 5.34075 14.445 5.25 14.1472 5.25H12.8527Z" fill="var(--gds-pattern-brandIcon-fill-highlight)"/><path d="M44.31 27.9127H42.3622C42.1432 27.0075 41.787 26.16 41.3153 25.3867L42.693 24.009C43.2562 23.4458 43.2562 22.5352 42.693 21.972L41.778 21.057C41.2147 20.4937 40.3042 20.4937 39.741 21.057L38.3632 22.4347C37.59 21.963 36.7425 21.606 35.8372 21.3877V19.44C35.8372 18.645 35.1922 18 34.3972 18H33.1035C32.3085 18 31.6635 18.645 31.6635 19.44V21.3877C30.7582 21.6067 29.9107 21.963 29.1375 22.4347L27.7597 21.057C27.1965 20.4937 26.286 20.4937 25.7228 21.057L24.8077 21.972C24.2445 22.5352 24.2445 23.4458 24.8077 24.009L26.1855 25.3867C25.7138 26.16 25.3568 27.0075 25.1385 27.9127H23.19C22.395 27.9127 21.75 28.5577 21.75 29.3527V30.6465C21.75 31.4415 22.395 32.0865 23.19 32.0865H25.1377C25.3567 32.9917 25.713 33.8392 26.1847 34.6125L24.807 35.9902C24.2437 36.5535 24.2437 37.464 24.807 38.0272L25.722 38.9422C26.2853 39.5055 27.1958 39.5055 27.759 38.9422L29.1367 37.5645C29.91 38.0362 30.7575 38.3932 31.6627 38.6115V40.5592C31.6627 41.3542 32.3077 41.9992 33.1027 41.9992H34.3965C35.1915 41.9992 35.8365 41.3542 35.8365 40.5592V38.6115C36.7417 38.3925 37.5892 38.0362 38.3625 37.5645L39.7402 38.9422C40.3035 39.5055 41.214 39.5055 41.7772 38.9422L42.6922 38.0272C43.2555 37.464 43.2555 36.5535 42.6922 35.9902L41.3145 34.6125C41.7862 33.8392 42.1432 32.9917 42.3615 32.0865H44.3092C45.1042 32.0865 45.7492 31.4415 45.7492 30.6465V29.3527C45.75 28.5577 45.105 27.9127 44.31 27.9127ZM33.75 33.75C31.6785 33.75 30 32.0715 30 30C30 27.9285 31.6785 26.25 33.75 26.25C35.8215 26.25 37.5 27.9285 37.5 30C37.5 32.0715 35.8215 33.75 33.75 33.75Z" fill="var(--gds-pattern-brandIcon-fill-secondary)"/><path opacity="0.15" d="M44.31 32.0872C45.105 32.0872 45.75 31.4422 45.75 30.6472V29.3535C45.75 28.5585 45.105 27.9135 44.31 27.9135H42.3622C42.354 27.8797 42.3427 27.8467 42.3337 27.8137C42.2565 27.9847 42.189 28.161 42.138 28.3447C40.4992 28.4422 39.1035 29.5995 38.7165 31.212C38.5942 31.719 38.3917 32.2065 38.115 32.6602C37.8795 33.0465 36.7957 34.1295 36.4095 34.3657C35.958 34.641 35.469 34.8442 34.956 34.968C33.3465 35.3572 32.1915 36.753 32.0947 38.3887C31.9117 38.4397 31.7355 38.5072 31.5645 38.5845C31.5982 38.5927 31.6305 38.6047 31.6642 38.613V40.5607C31.6642 41.3557 32.3092 42.0007 33.1042 42.0007H34.398C35.193 42.0007 35.838 41.3557 35.838 40.5607V38.613C36.7432 38.394 37.5907 38.0377 38.364 37.566L39.7417 38.9437C40.305 39.507 41.2155 39.507 41.7787 38.9437L42.6937 38.0287C43.257 37.4655 43.257 36.555 42.6937 35.9917L41.316 34.614C41.7877 33.8407 42.1447 32.9932 42.363 32.088L44.31 32.0872Z" fill="var(--gds-pattern-brandIcon-fill-shadow)"/></svg>`,
     name: 'brand-gear'
 };
+const gdsBrandIconIcon = {
+    data: ``,
+    name: 'brand-icon'
+};
 const gdsBrandInboxIcon = {
     data: `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Brand"><path id="Vector" d="M16.5625 15.9375H5.1825L5.21406 4.375H14.6875C16.4134 4.375 17.8125 5.77406 17.8125 7.5V14.6875C17.8125 15.3778 17.2528 15.9375 16.5625 15.9375Z" fill="var(--gds-pattern-brandIcon-fill-primary)"/><path id="Vector_2" d="M7.1875 15.9375H3.4375C2.74719 15.9375 2.1875 15.3778 2.1875 14.6875V7.5C2.1875 5.77406 3.58656 4.375 5.3125 4.375C7.03844 4.375 8.4375 5.77406 8.4375 7.5V14.6875C8.4375 15.3778 7.87781 15.9375 7.1875 15.9375Z" fill="var(--gds-pattern-brandIcon-fill-highlight)"/><path id="Vector_3" d="M15.62 9.68684L15.6244 7.18684C15.625 6.84152 15.346 6.56121 15.0006 6.56059L11.2506 6.55371C10.9053 6.55309 10.625 6.83215 10.6244 7.17746C10.6238 7.52277 10.9028 7.80309 11.2481 7.80371L12.8106 7.80652L12.8072 9.68152C12.8066 10.0268 13.0856 10.3071 13.431 10.3078L14.9935 10.3106C15.3394 10.3112 15.6194 10.0321 15.62 9.68684Z" fill="var(--gds-pattern-brandIcon-fill-secondary)"/><path id="Vector_4" d="M6.875 9.0625H3.75C3.40469 9.0625 3.125 8.78281 3.125 8.4375C3.125 8.09219 3.40469 7.8125 3.75 7.8125H6.875C7.22031 7.8125 7.5 8.09219 7.5 8.4375C7.5 8.78281 7.22031 9.0625 6.875 9.0625Z" fill="var(--gds-pattern-brandIcon-fill-primary)"/><path id="Vector_5" opacity="0.3" d="M5.21406 4.38C3.53406 4.4325 2.1875 5.80719 2.1875 7.5V10.3125C3.05031 10.3125 3.75 9.61312 3.75 8.75V7.5C3.75 6.6525 4.41469 5.96812 5.26312 5.94187C5.28812 5.94094 5.31312 5.93938 5.33781 5.9375H6.25C7.11281 5.9375 7.8125 5.23813 7.8125 4.375H5.21406V4.38Z" fill="var(--gds-pattern-brandIcon-fill-highlight)"/><path id="Vector_6" opacity="0.15" d="M17.8125 14.6875V9.6875C16.9497 9.6875 16.25 10.3869 16.25 11.25V14.0625C16.25 14.235 16.11 14.375 15.9375 14.375H14.375C13.5122 14.375 12.8125 15.0744 12.8125 15.9375H16.5625C17.2528 15.9375 17.8125 15.3778 17.8125 14.6875Z" fill="var(--gds-pattern-brandIcon-fill-shadow)"/><path id="Vector_7" d="M3.43347 6.72299C3.5316 6.48393 3.6741 6.2683 3.85128 6.0858C4.02847 5.9033 4.23972 5.75455 4.47566 5.64893" stroke="var(--gds-pattern-brandIcon-fill-highlight)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`,
     name: 'brand-inbox'
@@ -1708,6 +1712,10 @@ const gdsLineCurrencyPoundIcon = {
     data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.1427 4L14.138 4.00001C12.9267 4.0038 11.7692 4.49698 10.9175 5.36666C10.0663 6.23581 9.58918 7.41031 9.58551 8.63289V8.63514V11.7704H6.75C6.33579 11.7704 6 12.1062 6 12.5204C6 12.9346 6.33579 13.2704 6.75 13.2704H9.58551V15.8834L7.36606 19.2828C7.21555 19.5133 7.20344 19.8078 7.33451 20.0499C7.46558 20.292 7.71875 20.4428 7.99406 20.4428H17.9452C18.3594 20.4428 18.6952 20.107 18.6952 19.6928C18.6952 19.2786 18.3594 18.9428 17.9452 18.9428H9.37943L10.9635 16.5166C11.0431 16.3946 11.0855 16.2522 11.0855 16.1065V13.2704H13.7626C14.1769 13.2704 14.5126 12.9346 14.5126 12.5204C14.5126 12.1062 14.1769 11.7704 13.7626 11.7704H11.0855V8.63633C11.0883 7.80044 11.4148 7.00263 11.9892 6.41619C12.5627 5.83059 13.3362 5.50316 14.1404 5.50002C14.9445 5.50316 15.7181 5.83059 16.2916 6.41619C16.8659 7.00266 17.1925 7.80053 17.1952 8.63648V9.53171C17.1952 9.94592 17.531 10.2817 17.9452 10.2817C18.3594 10.2817 18.6952 9.94592 18.6952 9.53171L18.6952 8.63514L18.6952 8.63289C18.6915 7.41031 18.2144 6.23581 17.3632 5.36666C16.5115 4.49698 15.3541 4.0038 14.1427 4Z" fill="currentColor"/></svg>`,
     name: 'line-currency-pound'
 };
+const gdsLineCursorHoverIcon = {
+    data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5C1 3.89543 1.89543 3 3 3H13C14.1046 3 15 3.89543 15 5V10C15 10.8062 14.523 11.501 13.8358 11.8175C13.7656 11.6802 13.6736 11.5523 13.5607 11.4394L13.1148 10.9935C13.613 10.9366 14 10.5135 14 10V5C14 4.44772 13.5523 4 13 4H3C2.44772 4 2 4.44772 2 5V10C2 10.5523 2.44772 11 3 11H7V12H3C1.89543 12 1 11.1046 1 10V5ZM8.85355 8.14645C8.71055 8.00345 8.4955 7.96067 8.30866 8.03806C8.12182 8.11545 8 8.29777 8 8.5V14.5C8 14.7152 8.13771 14.9063 8.34189 14.9743C8.54606 15.0424 8.77087 14.9722 8.9 14.8L10.25 13H12.5C12.7022 13 12.8845 12.8782 12.9619 12.6913C13.0393 12.5045 12.9966 12.2894 12.8536 12.1464L8.85355 8.14645ZM9 13V9.70711L11.2929 12H10C9.84262 12 9.69443 12.0741 9.6 12.2L9 13Z" fill="currentColor"/></svg>`,
+    name: 'line-cursor-hover'
+};
 const gdsLineDatabaseLinkIcon = {
     data: `<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4V16C0 16.6906 0.315303 17.2934 0.774234 17.7798C1.2294 18.2622 1.85301 18.6626 2.56668 18.9825C3.99575 19.6231 5.91738 20 8 20C8.51088 20 9.01207 19.9773 9.49867 19.9336C8.85376 19.5859 8.29843 19.0933 7.87621 18.4995C6.00545 18.4848 4.34946 18.1378 3.18027 17.6137C2.58195 17.3455 2.14382 17.0456 1.86525 16.7503C1.59044 16.4591 1.5 16.2069 1.5 16V6.39242C1.82094 6.61282 2.18063 6.80942 2.56668 6.98248C3.99575 7.6231 5.91738 8 8 8C10.0826 8 12.0042 7.6231 13.4333 6.98248C13.8194 6.80942 14.1791 6.61282 14.5 6.39242V11H15.25C15.5052 11 15.7557 11.0201 16 11.0589V4C16 3.30945 15.6847 2.70664 15.2258 2.22025C14.7706 1.73784 14.147 1.33745 13.4333 1.01752C12.0042 0.376905 10.0826 0 8 0C5.91738 0 3.99575 0.376905 2.56668 1.01752C1.85301 1.33745 1.2294 1.73784 0.774234 2.22025C0.315303 2.70664 0 3.30945 0 4ZM1.5 4C1.5 3.79309 1.59044 3.54091 1.86525 3.24966C2.14382 2.95441 2.58195 2.65449 3.18027 2.38628C4.37519 1.85063 6.07856 1.5 8 1.5C9.92144 1.5 11.6248 1.85063 12.8197 2.38628C13.418 2.65449 13.8562 2.95441 14.1348 3.24966C14.4096 3.54091 14.5 3.79309 14.5 4C14.5 4.20691 14.4096 4.45909 14.1348 4.75034C13.8562 5.04559 13.418 5.3455 12.8197 5.61372C11.6248 6.14937 9.92144 6.5 8 6.5C6.07856 6.5 4.37519 6.14937 3.18027 5.61372C2.58195 5.3455 2.14382 5.04559 1.86525 4.75034C1.59044 4.45909 1.5 4.20691 1.5 4ZM19 15.75C19 13.6789 17.3211 12 15.25 12L15.1482 12.0068C14.7822 12.0565 14.5 12.3703 14.5 12.75C14.5 13.1642 14.8358 13.5 15.25 13.5L15.404 13.5052C16.5748 13.5844 17.5 14.5591 17.5 15.75C17.5 16.9926 16.4926 18 15.25 18L15.2466 18.0046L15.1448 18.0119C14.779 18.0633 14.4983 18.3783 14.5 18.758C14.5019 19.1722 14.8392 19.5065 15.2534 19.5046V19.5L15.4523 19.4948C17.4276 19.3913 19 17.7543 19 15.75ZM12.5 12.75C12.5 12.3358 12.1642 12 11.75 12L11.5508 12.0052C9.57236 12.1087 8 13.7457 8 15.75C8 17.8211 9.67893 19.5 11.75 19.5L11.8518 19.4932C12.2178 19.4435 12.5 19.1297 12.5 18.75C12.5 18.3358 12.1642 18 11.75 18L11.596 17.9948C10.4252 17.9156 9.5 16.9409 9.5 15.75C9.5 14.5074 10.5074 13.5 11.75 13.5L11.8518 13.4932C12.2178 13.4435 12.5 13.1297 12.5 12.75ZM16 15.75C16 15.3358 15.6642 15 15.25 15H11.75L11.6482 15.0068C11.2822 15.0565 11 15.3703 11 15.75C11 16.1642 11.3358 16.5 11.75 16.5H15.25L15.3518 16.4932C15.7178 16.4435 16 16.1297 16 15.75Z" fill="currentColor"/></svg>`,
     name: 'line-database-link'
@@ -1732,6 +1740,10 @@ const gdsLineDisconnectIcon = {
     data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.7803 3.28033C22.0732 2.98744 22.0732 2.51256 21.7803 2.21967C21.4874 1.92678 21.0126 1.92678 20.7197 2.21967L18.7077 4.23161C17.0483 3.05263 14.7323 3.20693 13.2448 4.6945L12.1767 5.76252C11.4933 6.44594 11.4933 7.55398 12.1767 8.2374L15.7625 11.8232C16.446 12.5066 17.554 12.5066 18.2374 11.8232L19.3054 10.7552C20.793 9.26761 20.9473 6.9517 19.7684 5.29228L21.7803 3.28033ZM18.1945 5.75516L18.2173 5.77798L18.2197 5.78033L18.222 5.78267L18.2448 5.80542C19.3187 6.87936 19.3187 8.62056 18.2448 9.6945L17.1767 10.7625C17.0791 10.8602 16.9208 10.8602 16.8232 10.7625L13.2374 7.17674C13.1398 7.07911 13.1398 6.92082 13.2374 6.82318L14.3054 5.75516C15.3794 4.68122 17.1206 4.68122 18.1945 5.75516ZM10.7803 11.2803C11.0732 10.9874 11.0732 10.5126 10.7803 10.2197C10.4874 9.92678 10.0126 9.92678 9.71967 10.2197L8.00001 11.9393L7.53035 11.4697C7.23746 11.1768 6.76258 11.1768 6.46969 11.4697L4.69456 13.2448C3.20701 14.7324 3.0527 17.0483 4.23163 18.7077L2.21967 20.7197C1.92678 21.0126 1.92678 21.4874 2.21967 21.7803C2.51256 22.0732 2.98744 22.0732 3.28033 21.7803L5.29229 19.7684C6.95171 20.9473 9.26766 20.793 10.7552 19.3055L12.5303 17.5303C12.8232 17.2374 12.8232 16.7626 12.5303 16.4697L12.0607 16L13.7803 14.2803C14.0732 13.9874 14.0732 13.5126 13.7803 13.2197C13.4874 12.9268 13.0126 12.9268 12.7197 13.2197L11 14.9393L9.06067 13L10.7803 11.2803ZM7.46631 13.527L7.46967 13.5303L7.47305 13.5337L10.4664 16.527L10.4697 16.5303L10.473 16.5336L10.9394 17L9.69456 18.2448C8.62062 19.3187 6.87942 19.3187 5.80548 18.2448L5.75522 18.1945C4.68128 17.1206 4.68128 15.3794 5.75522 14.3055L7.00002 13.0607L7.46631 13.527Z" fill="currentColor"/></svg>`,
     name: 'line-disconnect'
 };
+const gdsLineDismissCircleIcon = {
+    data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3ZM5.83859 5.96569L5.89645 5.89645C6.07001 5.72288 6.33944 5.7036 6.53431 5.83859L6.60355 5.89645L8 7.293L9.39645 5.89645C9.57001 5.72288 9.83944 5.7036 10.0343 5.83859L10.1036 5.89645C10.2771 6.07001 10.2964 6.33944 10.1614 6.53431L10.1036 6.60355L8.707 8L10.1036 9.39645C10.2771 9.57001 10.2964 9.83944 10.1614 10.0343L10.1036 10.1036C9.92999 10.2771 9.66056 10.2964 9.46569 10.1614L9.39645 10.1036L8 8.707L6.60355 10.1036C6.42999 10.2771 6.16056 10.2964 5.96569 10.1614L5.89645 10.1036C5.72288 9.92999 5.7036 9.66056 5.83859 9.46569L5.89645 9.39645L7.293 8L5.89645 6.60355C5.72288 6.42999 5.7036 6.16056 5.83859 5.96569L5.89645 5.89645L5.83859 5.96569Z" fill="currentColor"/></svg>`,
+    name: 'line-dismiss-circle'
+};
 const gdsLineDismissIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3L13 13M13 3L3 13" stroke="currentColor" stroke-linecap="round"/></svg>`,
     name: 'line-dismiss'
@@ -2192,6 +2204,10 @@ const gdsLineSmartphoneIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 14a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z" fill="currentColor"/></svg>`,
     name: 'line-smartphone'
 };
+const gdsLineSparkleCircleIcon = {
+    data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0m5.175-4.417c.275-.777 1.374-.778 1.65 0l.257.726a1 1 0 0 0 .609.609l.725.257c.778.275.778 1.374 0 1.65l-.725.256a1 1 0 0 0-.609.61l-.257.726c-.275.777-1.375.777-1.65 0l-.256-.726a1 1 0 0 0-.61-.61l-.726-.256c-.777-.275-.777-1.375 0-1.65l.726-.257a1 1 0 0 0 .61-.61zM12.672 10c-.2-.666-1.141-.666-1.341 0l-.179.593a.83.83 0 0 1-.558.559L10 11.33c-.666.2-.665 1.142 0 1.34l.592.178c.269.08.479.29.56.559l.178.595c.2.665 1.142.665 1.34 0l.179-.594a.83.83 0 0 1 .559-.559l.593-.178c.665-.2.665-1.141 0-1.341l-.594-.178a.83.83 0 0 1-.558-.559z" fill="currentColor"/></svg>`,
+    name: 'line-sparkle-circle'
+};
 const gdsLineSparkleIcon = {
     data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.46524 13.8291C9.62134 13.9399 9.80806 13.9993 9.99946 13.999C10.1915 13.9998 10.379 13.9403 10.5355 13.829C10.6922 13.7133 10.8109 13.5535 10.8765 13.37L11.2235 12.303C11.3077 12.0514 11.4491 11.8228 11.6365 11.635C11.8231 11.448 12.0508 11.3073 12.3015 11.224L13.3875 10.871C13.5667 10.8071 13.7217 10.6894 13.8315 10.534C13.9415 10.3786 14.0005 10.1929 14.0005 10.0025C14.0005 9.8121 13.9415 9.6264 13.8315 9.47099C13.7129 9.30564 13.5443 9.1829 13.3505 9.12099L12.2815 8.77499C12.0299 8.69189 11.8012 8.55114 11.6137 8.36398C11.4262 8.17681 11.285 7.94841 11.2015 7.69699L10.8485 6.61299C10.7852 6.43375 10.6678 6.27859 10.5125 6.16899C10.3556 6.06084 10.1695 6.00293 9.97896 6.00293C9.78841 6.00293 9.60235 6.06084 9.44546 6.16899C9.28572 6.28147 9.16594 6.44189 9.10346 6.62699L8.74846 7.71699C8.66476 7.96106 8.52691 8.18302 8.34524 8.36625C8.16358 8.54947 7.9428 8.68921 7.69946 8.77499L6.61546 9.12599C6.43437 9.18999 6.27775 9.30889 6.16743 9.46611C6.05712 9.62334 5.99859 9.81106 6.00003 10.0031C6.00146 10.1952 6.06277 10.382 6.17541 10.5376C6.28806 10.6932 6.44643 10.8097 6.62846 10.871L7.69546 11.218C7.94767 11.3025 8.17673 11.4446 8.36446 11.633C8.41519 11.6832 8.46262 11.7367 8.50646 11.793C8.62481 11.9457 8.71614 12.1175 8.77646 12.301L9.12846 13.381C9.19143 13.5617 9.30914 13.7184 9.46524 13.8291ZM8.00746 10.264L7.15246 9.99899L8.01646 9.71799C8.41071 9.58136 8.76826 9.35588 9.06146 9.05899C9.35281 8.75991 9.57294 8.39895 9.70546 8.00299L9.97046 7.14399L10.2505 8.00599C10.3835 8.4059 10.6081 8.7692 10.9064 9.06695C11.2046 9.3647 11.5683 9.58866 11.9685 9.72099L12.8485 9.98999L11.9875 10.27C11.5871 10.4022 11.2232 10.6264 10.9251 10.9246C10.6269 11.2227 10.4027 11.5866 10.2705 11.987L10.0055 12.844L9.72646 11.985C9.63026 11.6928 9.48483 11.4192 9.29646 11.176C9.22699 11.0872 9.15254 11.0024 9.07346 10.922C8.7738 10.6232 8.4089 10.3979 8.00746 10.264ZM14.5344 17.851C14.6703 17.9472 14.8328 17.9989 14.9994 17.999C15.1642 17.9975 15.3245 17.9451 15.4584 17.849C15.5979 17.7505 15.7029 17.6105 15.7584 17.449L16.0064 16.687C16.0595 16.5286 16.1485 16.3845 16.2664 16.266C16.3837 16.1475 16.5277 16.0587 16.6864 16.007L17.4584 15.755C17.6161 15.7005 17.7528 15.598 17.8494 15.462C17.9227 15.359 17.9706 15.2401 17.9891 15.115C18.0076 14.9899 17.9962 14.8622 17.9558 14.7423C17.9154 14.6225 17.8472 14.5139 17.7567 14.4256C17.6662 14.3372 17.5561 14.2716 17.4354 14.234L16.6714 13.985C16.5132 13.9324 16.3695 13.8438 16.2514 13.7261C16.1334 13.6085 16.0444 13.465 15.9914 13.307L15.7394 12.533C15.685 12.3757 15.5825 12.2396 15.4464 12.144C15.3443 12.071 15.2266 12.0231 15.1026 12.004C14.9787 11.985 14.8519 11.9953 14.7327 12.0343C14.6135 12.0732 14.5051 12.1396 14.4163 12.2282C14.3274 12.3167 14.2607 12.4249 14.2214 12.544L13.9744 13.306C13.9221 13.4636 13.8345 13.6073 13.7184 13.726C13.6038 13.8422 13.4643 13.9308 13.3104 13.985L12.5344 14.238C12.4169 14.2788 12.3106 14.3465 12.2238 14.4356C12.1371 14.5247 12.0723 14.6328 12.0346 14.7513C11.997 14.8699 11.9875 14.9955 12.0069 15.1184C12.0262 15.2412 12.074 15.3578 12.1464 15.459C12.2446 15.5988 12.3846 15.7039 12.5464 15.759L13.3094 16.006C13.4682 16.0594 13.6126 16.1487 13.7314 16.267C13.8496 16.3852 13.938 16.5299 13.9894 16.689L14.2424 17.463C14.2971 17.6195 14.3992 17.755 14.5344 17.851ZM13.6204 15.058L13.4424 14.999L13.6264 14.935C13.9281 14.83 14.2018 14.6573 14.4264 14.43C14.6528 14.201 14.8238 13.9233 14.9264 13.618L14.9844 13.44L15.0434 13.621C15.1453 13.9277 15.3175 14.2064 15.5461 14.4348C15.7748 14.6633 16.0536 14.8352 16.3604 14.937L16.5554 15L16.3754 15.059C16.068 15.1612 15.7888 15.3339 15.5601 15.5632C15.3314 15.7926 15.1596 16.0723 15.0584 16.38L14.9994 16.561L14.9414 16.38C14.84 16.0716 14.6676 15.7914 14.4382 15.5618C14.2088 15.3322 13.9286 15.1596 13.6204 15.058Z" fill="currentColor"/></svg>`,
     name: 'line-sparkle'
@@ -2292,6 +2308,10 @@ const gdsLineUpIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 13.5C7.5 13.7761 7.72386 14 8 14C8.27614 14 8.5 13.7761 8.5 13.5V3.80298L12.1284 7.83448C12.3131 8.03974 12.6292 8.05638 12.8345 7.87165C13.0397 7.68692 13.0564 7.37077 12.8716 7.16552L8.37165 2.16552C8.27683 2.06016 8.14174 2 8 2C7.85826 2 7.72317 2.06016 7.62835 2.16552L3.12836 7.16552C2.94363 7.37077 2.96027 7.68692 3.16552 7.87165C3.37078 8.05638 3.68692 8.03974 3.87165 7.83448L7.5 3.80298V13.5Z" fill="currentColor"/></svg>`,
     name: 'line-up'
 };
+const gdsLineUploadIcon = {
+    data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 3.00098C15.2761 3.00098 15.5 2.77712 15.5 2.50098C15.5 2.25552 15.3231 2.05137 15.0899 2.00903L15 2.00098H4C3.72386 2.00098 3.5 2.22483 3.5 2.50098C3.5 2.74644 3.67688 2.95059 3.91012 2.99292L4 3.00098H15ZM9.50014 17.9988C9.7456 17.9988 9.9497 17.8218 9.99197 17.5885L10 17.4986L9.996 5.70477L13.6414 9.3531C13.8148 9.52683 14.0842 9.54636 14.2792 9.41154L14.3485 9.35375C14.5222 9.18034 14.5418 8.91094 14.407 8.71595L14.3492 8.64664L9.85745 4.14664C9.78495 4.07401 9.69568 4.02833 9.60207 4.00962L9.49608 3.99987C9.33511 3.99987 9.19192 4.076 9.10051 4.19419L4.64386 8.64607C4.44846 8.84119 4.44823 9.15777 4.64336 9.35317C4.8168 9.52686 5.08621 9.54634 5.28117 9.41148L5.35046 9.35368L8.996 5.71277L9 17.4989C9.00008 17.7751 9.224 17.9988 9.50014 17.9988Z" fill="currentColor"/></svg>`,
+    name: 'line-upload'
+};
 const gdsLineViewIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 3.5C13.8096 3.5 13.25 4.05964 13.25 4.75V15.25C13.25 15.9404 13.8096 16.5 14.5 16.5H17C17.6904 16.5 18.25 15.9404 18.25 15.25V4.75C18.25 4.05964 17.6904 3.5 17 3.5H14.5ZM14.25 4.75C14.25 4.61193 14.3619 4.5 14.5 4.5H17C17.1381 4.5 17.25 4.61193 17.25 4.75V15.25C17.25 15.3881 17.1381 15.5 17 15.5H14.5C14.3619 15.5 14.25 15.3881 14.25 15.25V4.75ZM1.75 5C1.75 4.72386 1.97386 4.5 2.25 4.5H11.25C11.5261 4.5 11.75 4.72386 11.75 5C11.75 5.27614 11.5261 5.5 11.25 5.5H2.25C1.97386 5.5 1.75 5.27614 1.75 5ZM1.75 8.33331C1.75 8.05717 1.97386 7.83331 2.25 7.83331H11.25C11.5261 7.83331 11.75 8.05717 11.75 8.33331C11.75 8.60946 11.5261 8.83331 11.25 8.83331H2.25C1.97386 8.83331 1.75 8.60946 1.75 8.33331ZM2.25 11.1666C1.97386 11.1666 1.75 11.3905 1.75 11.6666C1.75 11.9428 1.97386 12.1666 2.25 12.1666H11.25C11.5261 12.1666 11.75 11.9428 11.75 11.6666C11.75 11.3905 11.5261 11.1666 11.25 11.1666H2.25ZM1.75 14.9999C1.75 14.7238 1.97386 14.4999 2.25 14.4999H11.25C11.5261 14.4999 11.75 14.7238 11.75 14.9999C11.75 15.2761 11.5261 15.4999 11.25 15.4999H2.25C1.97386 15.4999 1.75 15.2761 1.75 14.9999Z" fill="currentColor"/></svg>`,
     name: 'line-view'
@@ -2662,6 +2682,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsBrandAskIcon: gdsBrandAskIcon,
     gdsBrandCreateIcon: gdsBrandCreateIcon,
     gdsBrandGearIcon: gdsBrandGearIcon,
+    gdsBrandIconIcon: gdsBrandIconIcon,
     gdsBrandInboxIcon: gdsBrandInboxIcon,
     gdsBrandTimerIcon: gdsBrandTimerIcon,
     gdsCaIcon: gdsCaIcon,
@@ -3060,12 +3081,14 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineCurrencyDollarIcon: gdsLineCurrencyDollarIcon,
     gdsLineCurrencyEuroIcon: gdsLineCurrencyEuroIcon,
     gdsLineCurrencyPoundIcon: gdsLineCurrencyPoundIcon,
+    gdsLineCursorHoverIcon: gdsLineCursorHoverIcon,
     gdsLineDatabaseLinkIcon: gdsLineDatabaseLinkIcon,
     gdsLineDateIcon: gdsLineDateIcon,
     gdsLineDeleteIcon: gdsLineDeleteIcon,
     gdsLineDescriptionIcon: gdsLineDescriptionIcon,
     gdsLineDetailsIcon: gdsLineDetailsIcon,
     gdsLineDisconnectIcon: gdsLineDisconnectIcon,
+    gdsLineDismissCircleIcon: gdsLineDismissCircleIcon,
     gdsLineDismissIcon: gdsLineDismissIcon,
     gdsLineDocumentAddIcon: gdsLineDocumentAddIcon,
     gdsLineDocumentIcon: gdsLineDocumentIcon,
@@ -3181,6 +3204,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineSignatureIcon: gdsLineSignatureIcon,
     gdsLineSlideTextSparkleIcon: gdsLineSlideTextSparkleIcon,
     gdsLineSmartphoneIcon: gdsLineSmartphoneIcon,
+    gdsLineSparkleCircleIcon: gdsLineSparkleCircleIcon,
     gdsLineSparkleIcon: gdsLineSparkleIcon,
     gdsLineStatusInProgressIcon: gdsLineStatusInProgressIcon,
     gdsLineStrikethroughIcon: gdsLineStrikethroughIcon,
@@ -3206,6 +3230,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineUpIcon: gdsLineUpIcon,
     gdsLineUpLeftIcon: gdsLineUpLeftIcon,
     gdsLineUpRightIcon: gdsLineUpRightIcon,
+    gdsLineUploadIcon: gdsLineUploadIcon,
     gdsLineViewIcon: gdsLineViewIcon,
     gdsLineWalletIcon: gdsLineWalletIcon,
     gdsLineWebsiteIcon: gdsLineWebsiteIcon,
@@ -4521,6 +4546,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class GdsTooltipComponent extends OnBrandChanged {
     #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "#isOverflowing" }] : /* istanbul ignore next */ []));
+    #resizeObserver = new ResizeObserver(() => this.#measureOverflow());
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
     onlyTextOverflow = input(false, { ...(ngDevMode ? { debugName: "onlyTextOverflow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -4531,20 +4559,32 @@ class GdsTooltipComponent extends OnBrandChanged {
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     maxWidth = input('100vw', ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
     appendTo = input(this.#document.body, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    lineClamp = input(1, { ...(ngDevMode ? { debugName: "lineClamp" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    tooltipOffset = input([0, 0], ...(ngDevMode ? [{ debugName: "tooltipOffset" }] : /* istanbul ignore next */ []));
     tooltipVariation = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
+    tooltipEnabled = computed(() => !this.disabled() && (!this.onlyTextOverflow() || this.#isOverflowing()), ...(ngDevMode ? [{ debugName: "tooltipEnabled" }] : /* istanbul ignore next */ []));
     tippyDirective = viewChild.required(TippyDirective);
     span = viewChild.required('span');
-    get isOverflowing() {
-        const span = this.span();
-        if (!span)
-            return false;
-        return span.nativeElement.clientWidth < span.nativeElement.scrollWidth;
-    }
+    #observeSize = afterNextRender(() => {
+        this.#resizeObserver.observe(this.span().nativeElement);
+        this.#destroyRef.onDestroy(() => this.#resizeObserver.disconnect());
+    });
+    #measureOnRender = afterRenderEffect({
+        read: () => {
+            this.tooltip();
+            this.#measureOverflow();
+        }
+    });
+    #updateOffset = afterRenderEffect(() => {
+        // binding [tpOffset] to the template does not work due to Helipopper applying only on ngOnChanges which signal inputs do not trigger.
+        // So we manually update the offset after render;
+        this.tippyDirective().updateProps({ offset: this.tooltipOffset() });
+    });
     #openOnOpen = effect(() => {
         const directive = this.tippyDirective();
         if (!directive)
             return;
-        if (this.open() && (!this.onlyTextOverflow() || this.isOverflowing)) {
+        if (this.open() && (!this.onlyTextOverflow() || this.#isOverflowing())) {
             // give the component time to render before triggering this
             // in case show is true initially
             setTimeout(() => {
@@ -4555,13 +4595,31 @@ class GdsTooltipComponent extends OnBrandChanged {
             directive.hide();
         }
     }, ...(ngDevMode ? [{ debugName: "#openOnOpen" }] : /* istanbul ignore next */ []));
+    #measureOverflow = () => {
+        if (!this.onlyTextOverflow()) {
+            this.#isOverflowing.set(false);
+            return;
+        }
+        const el = this.span()?.nativeElement;
+        if (!el) {
+            this.#isOverflowing.set(false);
+            return;
+        }
+        // 1px slack avoids subpixel false positives. Line-clamp overflow is height-only;
+        // width is a false positive on -webkit-box.
+        const overflowing = this.lineClamp() > 1 ? el.scrollHeight - el.clientHeight > 1 : el.scrollWidth - el.clientWidth > 1;
+        this.#isOverflowing.set(overflowing);
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTooltipComponent, isStandalone: true, selector: "gds-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "onlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "useHostWidth", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tippyDirective", first: true, predicate: TippyDirective, descendants: true, isSignal: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TippyDirective }], ngImport: i0, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"!disabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTooltipComponent, isStandalone: true, selector: "gds-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "onlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "useHostWidth", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, tooltipOffset: { classPropertyName: "tooltipOffset", publicName: "tooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--line-clamp": "lineClamp() > 1 ? lineClamp() : null", "attr.line-clamp": "lineClamp() > 1 ? lineClamp() : null" } }, viewQueries: [{ propertyName: "tippyDirective", first: true, predicate: TippyDirective, descendants: true, isSignal: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TippyDirective }], ngImport: i0, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"tooltipEnabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host[line-clamp] .gds-tooltip_container{white-space:normal;display:-webkit-box;line-clamp:var(--line-clamp);-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-tooltip', hostDirectives: [TippyDirective], imports: [TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"!disabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}\n"] }]
-        }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], onlyTextOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyTextOverflow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipInteractive", required: false }] }], useHostWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "useHostWidth", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], tippyDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TippyDirective), { isSignal: true }] }], span: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }] } });
+            args: [{ selector: 'gds-tooltip', hostDirectives: [TippyDirective], imports: [TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--line-clamp]': 'lineClamp() > 1 ? lineClamp() : null',
+                        '[attr.line-clamp]': 'lineClamp() > 1 ? lineClamp() : null'
+                    }, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"tooltipEnabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host[line-clamp] .gds-tooltip_container{white-space:normal;display:-webkit-box;line-clamp:var(--line-clamp);-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}}\n"] }]
+        }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], onlyTextOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyTextOverflow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipInteractive", required: false }] }], useHostWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "useHostWidth", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], lineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClamp", required: false }] }], tooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOffset", required: false }] }], tippyDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TippyDirective), { isSignal: true }] }], span: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }] } });
 
 class GdsChipComponent extends OnBrandChanged {
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
@@ -4630,7 +4688,7 @@ class GdsChipComponent extends OnBrandChanged {
         return map[chipText.toLowerCase()] ?? 'grey';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChipComponent, isStandalone: true, selector: "gds-chip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.rounded": "this.roundedAttr", "attr.btn": "this.hasDismiss", "attr.width": "this.widthStyle", "attr.compact": "this.compactAttr", "style.--background-color": "this.backgroundStyle", "style.--color": "this.textColorStyle" } }, usesInheritance: true, ngImport: i0, template: "<gds-tooltip\n  onlyTextOverflow\n  [tooltip]=\"text() | titlecase\"\n>\n  {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n  <gds-icon\n    class=\"\n      gds-chip_dismiss\n      gds-icon-size-3xs\n    \"\n    key=\"line-dismiss\"\n    (click)=\"handleDismissed($event)\"\n  />\n}\n", styles: ["@layer design-system{:host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}}\n"], dependencies: [{ kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChipComponent, isStandalone: true, selector: "gds-chip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.rounded": "this.roundedAttr", "attr.btn": "this.hasDismiss", "attr.width": "this.widthStyle", "attr.compact": "this.compactAttr", "style.--background-color": "this.backgroundStyle", "style.--color": "this.textColorStyle" } }, usesInheritance: true, ngImport: i0, template: "<gds-tooltip\n  onlyTextOverflow\n  [tooltip]=\"text() | titlecase\"\n>\n  {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n  <gds-icon\n    class=\"\n      gds-chip_dismiss\n      gds-icon-size-3xs\n    \"\n    key=\"line-dismiss\"\n    (click)=\"handleDismissed($event)\"\n  />\n}\n", styles: ["@layer design-system{:host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}}\n"], dependencies: [{ kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChipComponent, decorators: [{
             type: Component,
@@ -4807,7 +4865,7 @@ class GdsContextMenuItemComponent extends GdsContextMenuBaseDirective {
     nestedMenu = input(...(ngDevMode ? [undefined, { debugName: "nestedMenu" }] : /* istanbul ignore next */ []));
     hasChildren = computed(() => !!this.nestedMenu(), ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuItemComponent, isStandalone: true, selector: "gds-context-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, nestedMenu: { classPropertyName: "nestedMenu", publicName: "nestedMenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "nestedMenu"] }], ngImport: i0, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuItemComponent, isStandalone: true, selector: "gds-context-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, nestedMenu: { classPropertyName: "nestedMenu", publicName: "nestedMenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "nestedMenu"] }], ngImport: i0, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuItemComponent, decorators: [{
             type: Component,
@@ -4816,17 +4874,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         { directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: nestedMenu'] }
                     ], host: {
                         tabindex: '0'
-                    }, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
+                    }, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], nestedMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nestedMenu", required: false }] }] } });
 
 class GdsContextMenuHeadingComponent extends GdsContextMenuBaseDirective {
     variant = signal(GdsContextMenuItemVariantEnum.Heading).asReadonly();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuHeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuHeadingComponent, isStandalone: true, selector: "gds-context-menu-heading", usesInheritance: true, ngImport: i0, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuHeadingComponent, isStandalone: true, selector: "gds-context-menu-heading", usesInheritance: true, ngImport: i0, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuHeadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-context-menu-heading', imports: [GdsIconComponent, TippyDirective, GdsSwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
+            args: [{ selector: 'gds-context-menu-heading', imports: [GdsIconComponent, TippyDirective, GdsSwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
         }] });
 
 class GdsContextMenuSwitchComponent extends GdsContextMenuBaseDirective {
@@ -4844,7 +4902,7 @@ class GdsContextMenuSwitchComponent extends GdsContextMenuBaseDirective {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuSwitchComponent, isStandalone: true, selector: "gds-context-menu-switch", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, triggered: { classPropertyName: "triggered", publicName: "triggered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", triggered: "triggeredChange" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "selected"], outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuSwitchComponent, isStandalone: true, selector: "gds-context-menu-switch", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, triggered: { classPropertyName: "triggered", publicName: "triggered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", triggered: "triggeredChange" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "selected"], outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuSwitchComponent, decorators: [{
             type: Component,
@@ -4855,7 +4913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             outputs: ['cdkMenuItemTriggered: clicked']
                         },
                         { directive: CdkMenuTrigger }
-                    ], template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
+                    ], template: "@if (border()) {\n  <div class=\"border\"></div>\n}\n<div class=\"\n  gds-radius-sm\n  wrapper\n\">\n  @if (variantIcon(); as variantIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-2xs\n      \"\n      [key]=\"variantIcon\"\n    />\n  }\n\n  @if (startIcon(); as startIcon) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_startIcon\n        gds-icon-size-xs\n      \"\n      [key]=\"startIcon\"\n    />\n  }\n\n  <div\n    class=\"\n      gds-align-items-start\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-min-width-0\n    \"\n  >\n    <div\n      class=\"\n        gds-context-menu-item_label\n        gds-truncate\n        gds-width-100-parent\n      \"\n      [class]=\"labelClass()\"\n      [tp]=\"label()\"\n      [tpOnlyTextOverflow]=\"true\"\n      [tpVariation]=\"tooltipVariation()\"\n    >\n      {{ label() }}\n    </div>\n\n    @if (hint(); as hint) {\n      <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n    }\n  </div>\n\n  @if (variant() === 'switch') {\n    <gds-switch class=\"\n      gds-margin-block-auto\n      gds-margin-inline-start-auto\n      gds-min-width-fit-content\n    \">\n      <input\n        type=\"checkbox\"\n        [checked]=\"selected()\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </gds-switch>\n  }\n\n  @if (hasChildren()) {\n    <gds-icon\n      class=\"\n        gds-context-menu-item_endIcon\n        gds-icon-size-xs\n      \"\n      key=\"line-chevron-right-stroke\"\n    />\n  }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], triggered: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggered", required: false }] }, { type: i0.Output, args: ["triggeredChange"] }] } });
 
 class GdsDialogComponent {
@@ -5201,7 +5259,7 @@ class GdsDocumentItemComponent {
         return !this.clicked.observed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDocumentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDocumentItemComponent, isStandalone: true, selector: "gds-document-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", clicked: "clicked" }, ngImport: i0, template: "<button\n  gds-item-display\n  class=\"gds-mobile-padding-sm\"\n  [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n  [suppressDismiss]=\"suppressDismissed\"\n  (click)=\"clicked.emit()\"\n  (dismissed)=\"dismissed.emit()\"\n>\n  <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n  <div\n    class=\"\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-xs\n      gds-min-width-0\n      gds-mobile-align-items-start\n      gds-mobile-flex-column\n      gds-row-gap-3xs\n      gds-width-100-parent\n    \"\n  >\n    <gds-tooltip\n      [tooltip]=\"fileName\"\n      onlyTextOverflow\n      class=\"\n        gds-mobile-text-body\n        gds-text-body-strong\n        gds-text-primary-primary\n        gds-text-start\n        gds-width-100-parent\n      \"\n    >\n      {{ fileName }}\n    </gds-tooltip>\n\n    @if (subtitle()) {\n      <span class=\"\n        gds-min-width-fit-content\n        gds-text-caption\n        gds-text-primary\n      \">{{ subtitle() }}</span>\n    }\n  </div>\n</button>\n", styles: ["@layer design-system{:host .suppress-click{cursor:default}}\n"], dependencies: [{ kind: "component", type: GdsItemDisplayComponent, selector: "gds-item-display, button[gds-item-display]", inputs: ["suppressDismiss"], outputs: ["dismissed"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsDoctypeToIconPipe, name: "gdsDoctypeToIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDocumentItemComponent, isStandalone: true, selector: "gds-document-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", clicked: "clicked" }, ngImport: i0, template: "<button\n  gds-item-display\n  class=\"gds-mobile-padding-sm\"\n  [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n  [suppressDismiss]=\"suppressDismissed\"\n  (click)=\"clicked.emit()\"\n  (dismissed)=\"dismissed.emit()\"\n>\n  <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n  <div\n    class=\"\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-xs\n      gds-min-width-0\n      gds-mobile-align-items-start\n      gds-mobile-flex-column\n      gds-row-gap-3xs\n      gds-width-100-parent\n    \"\n  >\n    <gds-tooltip\n      [tooltip]=\"fileName\"\n      onlyTextOverflow\n      class=\"\n        gds-mobile-text-body\n        gds-text-body-strong\n        gds-text-primary-primary\n        gds-text-start\n        gds-width-100-parent\n      \"\n    >\n      {{ fileName }}\n    </gds-tooltip>\n\n    @if (subtitle()) {\n      <span class=\"\n        gds-min-width-fit-content\n        gds-text-caption\n        gds-text-primary\n      \">{{ subtitle() }}</span>\n    }\n  </div>\n</button>\n", styles: ["@layer design-system{:host .suppress-click{cursor:default}}\n"], dependencies: [{ kind: "component", type: GdsItemDisplayComponent, selector: "gds-item-display, button[gds-item-display]", inputs: ["suppressDismiss"], outputs: ["dismissed"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsDoctypeToIconPipe, name: "gdsDoctypeToIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDocumentItemComponent, decorators: [{
             type: Component,
@@ -6125,17 +6183,39 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
     separatorLabel = input('or', ...(ngDevMode ? [{ debugName: "separatorLabel" }] : /* istanbul ignore next */ []));
     browseLabel = input('Browse your files', ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
     inputAriaLabel = input('File upload', ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : /* istanbul ignore next */ []));
-    changed = output();
+    layoutTmpl = contentChild('fileUploadLayoutTmpl', ...(ngDevMode ? [{ debugName: "layoutTmpl" }] : /* istanbul ignore next */ []));
     fileUpload = viewChild.required('fileUpload');
+    changed = output();
+    #emitOnFileChange = effect(() => {
+        this.changed.emit(this.value());
+    }, ...(ngDevMode ? [{ debugName: "#emitOnFileChange" }] : /* istanbul ignore next */ []));
     dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
-    preventDragEvent = (event, dragOver = false) => {
+    // dragenter/leave fire for every nested element; only clear dragOver when the count returns to 0
+    #dragDepth = 0;
+    onDragOver = (event) => {
+        event.preventDefault();
         event.stopPropagation();
+    };
+    onDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#dragDepth++;
+        this.dragOver.set(true);
+    };
+    onDragLeave = (event) => {
         event.preventDefault();
-        this.dragOver.set(dragOver);
+        event.stopPropagation();
+        this.#dragDepth = Math.max(0, this.#dragDepth - 1);
+        if (this.#dragDepth === 0) {
+            this.dragOver.set(false);
+        }
     };
     onFileDrop = (event) => {
-        this.preventDragEvent(event);
-        if (!event.dataTransfer)
+        event.preventDefault();
+        event.stopPropagation();
+        this.#dragDepth = 0;
+        this.dragOver.set(false);
+        if (!event.dataTransfer || this.disabled())
             return;
         let files = Array.from(event.dataTransfer.files);
         if (!this.multiple()) {
@@ -6158,21 +6238,22 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
         this.fileUpload().nativeElement.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n      gds-height-100-parent\n      gds-width-100-parent\n    " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n  tabindex=\"0\"\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-height-100-parent\n    gds-justify-content-center\n    gds-padding-md\n    gds-radius-md\n    gds-width-100-parent\n  \"\n  [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n  [attr.inert]=\"disabled() ? '' : undefined\"\n  (keydown.enter)=\"openFileSelector()\"\n>\n  <gds-icon\n    class=\"\n      gds-icon-size-lg\n      icon\n    \"\n    key=\"line-cloud-up\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-2xs\n    gds-text-body\n    gds-text-center\n  \">\n    <span class=\"\n      gds-text-body-large-strong\n      text\n    \">{{ dragDropLabel() }}</span>\n    <span class=\"text\">{{ separatorLabel() }}</span>\n    <a class=\"link\">\n      {{ browseLabel() }}\n    </a>\n  </div>\n  <span\n    class=\"\n      gds-align-content-center\n      gds-display-flex\n      gds-flex-wrap\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-text-body\n      gds-text-secondary\n    \"\n  >\n    <ng-content />\n  </span>\n\n  <input\n    #fileUpload\n    type=\"file\"\n    class=\"gds-display-none\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [attr.aria-label]=\"inputAriaLabel()\"\n    (change)=\"fileSelected($event)\"\n  />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n      gds-height-100-parent\n      gds-width-100-parent\n    " }, queries: [{ propertyName: "layoutTmpl", first: true, predicate: ["fileUploadLayoutTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultTmpl; context: { dragOver: dragOver() }\" />\n<input\n  #fileUpload\n  type=\"file\"\n  class=\"gds-display-none\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [attr.aria-label]=\"inputAriaLabel()\"\n  (change)=\"fileSelected($event)\"\n/>\n<ng-template #defaultTmpl>\n  <div\n    tabindex=\"0\"\n    class=\"\n      container\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-gap-sm\n      gds-height-100-parent\n      gds-justify-content-center\n      gds-padding-md\n      gds-radius-md\n      gds-width-100-parent\n    \"\n    [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n    [attr.inert]=\"disabled() ? '' : undefined\"\n    (keydown.enter)=\"openFileSelector()\"\n    (click)=\"openFileSelector()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-size-lg\n        icon\n      \"\n      key=\"line-cloud-up\"\n      aria-hidden=\"true\"\n    />\n    <div class=\"\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-text-body\n      gds-text-center\n    \">\n      <span class=\"\n        gds-text-body-large-strong\n        text\n      \">{{ dragDropLabel() }}</span>\n      <span class=\"text\">{{ separatorLabel() }}</span>\n      <a class=\"link\">\n        {{ browseLabel() }}\n      </a>\n    </div>\n    <span\n      class=\"\n        gds-align-content-center\n        gds-display-flex\n        gds-flex-wrap\n        gds-gap-2xs\n        gds-justify-content-center\n        gds-text-body\n        gds-text-secondary\n      \"\n    >\n      <ng-content />\n    </span>\n  </div>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host .container{cursor:var(--cursor)}:host[data-dragover] .container,:host .container:focus{outline:var(--border-color) auto 1px}:host .container{background:var(--background-color);border:2px dashed var(--border-color)}:host .container .text{color:var(--text-color)}:host .container .icon{color:var(--icon-color)}:host .container .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, NgClass], host: {
+            args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, NgClass, NgTemplateOutlet], host: {
                         '[attr.data-dragover]': 'dragOver() ? "": undefined',
                         '(drop)': 'onFileDrop($event)',
-                        '(dragover)': 'preventDragEvent($event, true)',
-                        '(dragleave)': 'preventDragEvent($event)',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragenter)': 'onDragEnter($event)',
+                        '(dragleave)': 'onDragLeave($event)',
                         class: `
       gds-height-100-parent
       gds-width-100-parent
     `
-                    }, template: "<label\n  tabindex=\"0\"\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-height-100-parent\n    gds-justify-content-center\n    gds-padding-md\n    gds-radius-md\n    gds-width-100-parent\n  \"\n  [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n  [attr.inert]=\"disabled() ? '' : undefined\"\n  (keydown.enter)=\"openFileSelector()\"\n>\n  <gds-icon\n    class=\"\n      gds-icon-size-lg\n      icon\n    \"\n    key=\"line-cloud-up\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-2xs\n    gds-text-body\n    gds-text-center\n  \">\n    <span class=\"\n      gds-text-body-large-strong\n      text\n    \">{{ dragDropLabel() }}</span>\n    <span class=\"text\">{{ separatorLabel() }}</span>\n    <a class=\"link\">\n      {{ browseLabel() }}\n    </a>\n  </div>\n  <span\n    class=\"\n      gds-align-content-center\n      gds-display-flex\n      gds-flex-wrap\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-text-body\n      gds-text-secondary\n    \"\n  >\n    <ng-content />\n  </span>\n\n  <input\n    #fileUpload\n    type=\"file\"\n    class=\"gds-display-none\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [attr.aria-label]=\"inputAriaLabel()\"\n    (change)=\"fileSelected($event)\"\n  />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
+                    }, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultTmpl; context: { dragOver: dragOver() }\" />\n<input\n  #fileUpload\n  type=\"file\"\n  class=\"gds-display-none\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [attr.aria-label]=\"inputAriaLabel()\"\n  (change)=\"fileSelected($event)\"\n/>\n<ng-template #defaultTmpl>\n  <div\n    tabindex=\"0\"\n    class=\"\n      container\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-gap-sm\n      gds-height-100-parent\n      gds-justify-content-center\n      gds-padding-md\n      gds-radius-md\n      gds-width-100-parent\n    \"\n    [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n    [attr.inert]=\"disabled() ? '' : undefined\"\n    (keydown.enter)=\"openFileSelector()\"\n    (click)=\"openFileSelector()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-size-lg\n        icon\n      \"\n      key=\"line-cloud-up\"\n      aria-hidden=\"true\"\n    />\n    <div class=\"\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-gap-2xs\n      gds-text-body\n      gds-text-center\n    \">\n      <span class=\"\n        gds-text-body-large-strong\n        text\n      \">{{ dragDropLabel() }}</span>\n      <span class=\"text\">{{ separatorLabel() }}</span>\n      <a class=\"link\">\n        {{ browseLabel() }}\n      </a>\n    </div>\n    <span\n      class=\"\n        gds-align-content-center\n        gds-display-flex\n        gds-flex-wrap\n        gds-gap-2xs\n        gds-justify-content-center\n        gds-text-body\n        gds-text-secondary\n      \"\n    >\n      <ng-content />\n    </span>\n  </div>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host .container{cursor:var(--cursor)}:host[data-dragover] .container,:host .container:focus{outline:var(--border-color) auto 1px}:host .container{background:var(--background-color);border:2px dashed var(--border-color)}:host .container .text{color:var(--text-color)}:host .container .icon{color:var(--icon-color)}:host .container .link{color:var(--text-color)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], layoutTmpl: [{ type: i0.ContentChild, args: ['fileUploadLayoutTmpl', { isSignal: true }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class GdsFormControlComponent extends GdsSignalFormContainer {
     locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6405,7 +6486,7 @@ class GdsSelectComponent extends GdsSignalFormControl {
         this.ref().handleClearClick();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, decorators: [{
             type: Component,
@@ -8059,11 +8140,11 @@ class GdsUserPromptComponent extends GdsDialogBaseDirective {
         return this.config.data?.secondaryTextVariant ?? 'default';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span>{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span class=\"description-text\">{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}:host .description-text{white-space:pre-wrap}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span>{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"] }]
+            args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span class=\"description-text\">{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}:host .description-text{white-space:pre-wrap}}\n"] }]
         }], propDecorators: { defaultDescTmpl: [{ type: i0.ViewChild, args: ['defaultDescriptionTmpl', { isSignal: true }] }] } });
 
 class GdsUserPromptService {
@@ -8118,7 +8199,7 @@ class GdsHistoryComponent {
     menuTmpl = contentChild('menuTmpl', ...(ngDevMode ? [{ debugName: "menuTmpl" }] : /* istanbul ignore next */ []));
     menuPosition = CDK_MENU_CONNECTED_POSITIONS;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-padding-sm\n\">\n  <span class=\"\n    gds-flex-grow-1\n    gds-text-primary-primary\n    gds-text-subtitle\n  \">{{ title() }}</span>\n  @if (!suppressCloseBtn()) {\n    <button\n      gds-icon-button\n      variant=\"primary\"\n      class=\"gds-background-none\"\n      (clicked)=\"closed.emit()\"\n      [attr.aria-label]=\"'Dismiss'\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  }\n</div>\n@if (loading()) {\n  <gds-spinner class=\"\n    gds-margin-block-auto\n    gds-margin-inline-auto\n  \" />\n} @else {\n  <div class=\"gds-scrollable-vertically\">\n    <ol\n      role=\"list\"\n      class=\"gds-list-unstyled\"\n    >\n      @for (item of reversed(); track $index) {\n        <li\n          gds-timeline-item\n          [connectorType]=\"connectorType()\"\n          [start]=\"$last\"\n          [end]=\"$first\"\n          (mouseenter)=\"itemHovered.emit(item)\"\n          (mouseleave)=\"itemHovered.emit(null)\"\n        >\n          <div\n            tag\n            class=\"\n              gds-display-flex\n              gds-justify-content-center\n            \"\n          >\n            @if (item.badgeType === 'icon') {\n              <gds-icon\n                class=\"\n                  badge-icon\n                  gds-background-base\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                  gds-padding-3xs\n                  gds-radius-2xl\n                \"\n                [key]=\"item.badgeData | gdsSvgicon\"\n              />\n            } @else {\n              <span\n                gds-badge\n                [ngClass]=\"{\n                  'gds-background-dark-strong gds-text-default-contrast': $first,\n                  'gds-background-white': !$first\n                }\"\n                >{{ item.badgeData }}</span\n              >\n            }\n          </div>\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-2xs\n          \">\n            <div class=\"\n              gds-align-items-start\n              gds-display-flex\n              gds-gap-3xs\n              gds-margin-inline-end-3xs\n            \">\n              <div class=\"\n                gds-display-flex\n                gds-flex-column\n                gds-flex-grow-1\n                gds-gap-2xs\n                item-content\n              \">\n                <gds-tooltip\n                  class=\"\n                    gds-flex-grow-1\n                    gds-text-body\n                    gds-text-primary\n                  \"\n                  [tooltip]=\"item.title\"\n                  onlyTextOverflow\n                >\n                  {{ item.title }}\n                </gds-tooltip>\n                @for (label of item.labels; track $index) {\n                  <gds-tooltip\n                    class=\"\n                      gds-text-caption\n                      gds-text-secondary\n                    \"\n                    onlyTextOverflow\n                    [tooltip]=\"label\"\n                  >\n                    {{ label }}\n                  </gds-tooltip>\n                }\n                <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n              </div>\n              @if (menuTmpl() && !$first) {\n                <button\n                  gds-icon-button\n                  variant=\"primary\"\n                  class=\"\n                    gds-background-none\n                    gds-min-height-0\n                  \"\n                  [attr.ariaLabel]=\"'Menu'\"\n                  [cdkMenuTriggerFor]=\"menu\"\n                  [cdkMenuPosition]=\"menuPosition\"\n                  #trigger=\"cdkMenuTriggerFor\"\n                >\n                  <gds-icon\n                    key=\"filled-menu-more\"\n                    class=\"gds-icon-size-2xs\"\n                  />\n                </button>\n                <ng-template #menu>\n                  <gds-dropdown\n                    mobileCancelLabel=\"Cancel\"\n                    (click)=\"trigger.close()\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n                  </gds-dropdown>\n                </ng-template>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ol>\n  </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-padding-sm\n\">\n  <span class=\"\n    gds-flex-grow-1\n    gds-text-primary-primary\n    gds-text-subtitle\n  \">{{ title() }}</span>\n  @if (!suppressCloseBtn()) {\n    <button\n      gds-icon-button\n      variant=\"primary\"\n      class=\"gds-background-none\"\n      (clicked)=\"closed.emit()\"\n      [attr.aria-label]=\"'Dismiss'\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  }\n</div>\n@if (loading()) {\n  <gds-spinner class=\"\n    gds-margin-block-auto\n    gds-margin-inline-auto\n  \" />\n} @else {\n  <div class=\"gds-scrollable-vertically\">\n    <ol\n      role=\"list\"\n      class=\"gds-list-unstyled\"\n    >\n      @for (item of reversed(); track $index) {\n        <li\n          gds-timeline-item\n          [connectorType]=\"connectorType()\"\n          [start]=\"$last\"\n          [end]=\"$first\"\n          (mouseenter)=\"itemHovered.emit(item)\"\n          (mouseleave)=\"itemHovered.emit(null)\"\n        >\n          <div\n            tag\n            class=\"\n              gds-display-flex\n              gds-justify-content-center\n            \"\n          >\n            @if (item.badgeType === 'icon') {\n              <gds-icon\n                class=\"\n                  badge-icon\n                  gds-background-base\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                  gds-padding-3xs\n                  gds-radius-2xl\n                \"\n                [key]=\"item.badgeData | gdsSvgicon\"\n              />\n            } @else {\n              <span\n                gds-badge\n                [ngClass]=\"{\n                  'gds-background-dark-strong gds-text-default-contrast': $first,\n                  'gds-background-white': !$first\n                }\"\n                >{{ item.badgeData }}</span\n              >\n            }\n          </div>\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-2xs\n          \">\n            <div class=\"\n              gds-align-items-start\n              gds-display-flex\n              gds-gap-3xs\n              gds-margin-inline-end-3xs\n            \">\n              <div class=\"\n                gds-display-flex\n                gds-flex-column\n                gds-flex-grow-1\n                gds-gap-2xs\n                item-content\n              \">\n                <gds-tooltip\n                  class=\"\n                    gds-flex-grow-1\n                    gds-text-body\n                    gds-text-primary\n                  \"\n                  [tooltip]=\"item.title\"\n                  onlyTextOverflow\n                >\n                  {{ item.title }}\n                </gds-tooltip>\n                @for (label of item.labels; track $index) {\n                  <gds-tooltip\n                    class=\"\n                      gds-text-caption\n                      gds-text-secondary\n                    \"\n                    onlyTextOverflow\n                    [tooltip]=\"label\"\n                  >\n                    {{ label }}\n                  </gds-tooltip>\n                }\n                <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n              </div>\n              @if (menuTmpl() && !$first) {\n                <button\n                  gds-icon-button\n                  variant=\"primary\"\n                  class=\"\n                    gds-background-none\n                    gds-min-height-0\n                  \"\n                  [attr.ariaLabel]=\"'Menu'\"\n                  [cdkMenuTriggerFor]=\"menu\"\n                  [cdkMenuPosition]=\"menuPosition\"\n                  #trigger=\"cdkMenuTriggerFor\"\n                >\n                  <gds-icon\n                    key=\"filled-menu-more\"\n                    class=\"gds-icon-size-2xs\"\n                  />\n                </button>\n                <ng-template #menu>\n                  <gds-dropdown\n                    mobileCancelLabel=\"Cancel\"\n                    (click)=\"trigger.close()\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n                  </gds-dropdown>\n                </ng-template>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ol>\n  </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, decorators: [{
             type: Component,
@@ -8245,7 +8326,7 @@ class GdsMessageInputComponent {
         this.textarea().nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n      gds-display-flex\n      gds-align-items-center\n      gds-border\n      gds-border-color-default\n      gds-radius-lg\n      gds-padding-xs\n      gds-padding-inline-2xs\n      gds-background-white\n      gds-position-relative\n      gds-overflow-hidden\n\n      gds-mobile-radius-sm\n      gds-mobile-padding-0\n      " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-xs\n  gds-width-100-parent\n\">\n  <gds-auto-growing-text-area\n    class=\"\n      gds-mobile-padding-block-2xs\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-2xs\n      gds-text-input\n      gds-text-primary\n      textarea\n    \"\n    [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n    [maxRows]=\"8\"\n  >\n    <textarea\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      rows=\"1\"\n      (input)=\"handleChange($event)\"\n      (keydown.enter)=\"handleSubmit($event)\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      >{{ value() }}</textarea\n    >\n  </gds-auto-growing-text-area>\n  <div\n    #slot\n    class=\"gds-display-contents\"\n    [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n  >\n    <ng-content />\n  </div>\n</div>\n<button\n  gds-icon-button\n  class=\"\n    gds-align-self-end\n    gds-background-none\n    gds-margin-block-end-0\n    gds-mobile-right-0\n    gds-padding-0\n    gds-right-2xs\n    trailing-icon\n  \"\n  variant=\"primary\"\n  [disabled]=\"disabled() && !enableIcon()\"\n  (clicked)=\"handleSubmit()\"\n  (mouseenter)=\"iconHoveringChanged($event)\"\n  (mouseleave)=\"iconHoveringChanged($event)\"\n  [attr.aria-label]=\"iconAriaLabel()\"\n>\n  <gds-icon\n    [key]=\"icon()\"\n    class=\"\n      gds-icon-size-xs\n      gds-mobile-icon-size-2xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n      gds-display-flex\n      gds-flex-column\n      gds-gap-sm\n      gds-border\n      gds-border-color-default\n      gds-radius-lg\n      gds-padding-xs\n      gds-padding-inline-2xs\n      gds-background-white\n      gds-position-relative\n      gds-overflow-hidden\n\n      gds-mobile-radius-sm\n      gds-mobile-padding-0\n      " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-width-100-parent\n  \">\n    <gds-auto-growing-text-area\n      class=\"\n        gds-mobile-padding-block-2xs\n        gds-mobile-text-input-mobile\n        gds-padding-block-3xs\n        gds-padding-inline-2xs\n        gds-text-input\n        gds-text-primary\n        textarea\n      \"\n      [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n      [maxRows]=\"8\"\n    >\n      <textarea\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        rows=\"1\"\n        (input)=\"handleChange($event)\"\n        (keydown.enter)=\"handleSubmit($event)\"\n        [attr.aria-label]=\"textareaAriaLabel()\"\n        >{{ value() }}</textarea\n      >\n    </gds-auto-growing-text-area>\n    <div\n      #slot\n      class=\"gds-display-contents\"\n      [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n    >\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n  <button\n    gds-icon-button\n    class=\"\n      gds-align-self-end\n      gds-background-none\n      gds-margin-block-end-0\n      gds-mobile-right-0\n      gds-padding-0\n      gds-right-2xs\n      trailing-icon\n    \"\n    variant=\"primary\"\n    [disabled]=\"disabled() && !enableIcon()\"\n    (clicked)=\"handleSubmit()\"\n    (mouseenter)=\"iconHoveringChanged($event)\"\n    (mouseleave)=\"iconHoveringChanged($event)\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n  >\n    <gds-icon\n      [key]=\"icon()\"\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-2xs\n      \"\n    />\n  </button>\n</div>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, decorators: [{
             type: Component,
@@ -8259,7 +8340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.aria-disabled]': 'disabled()',
                         class: `
       gds-display-flex
-      gds-align-items-center
+      gds-flex-column
+      gds-gap-sm
       gds-border
       gds-border-color-default
       gds-radius-lg
@@ -8274,7 +8356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       `,
                         '[class.gds-background-disabled]': 'disabled()',
                         '[class.gds-padding-block-end-2xs]': 'hasChildren()'
-                    }, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-xs\n  gds-width-100-parent\n\">\n  <gds-auto-growing-text-area\n    class=\"\n      gds-mobile-padding-block-2xs\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-2xs\n      gds-text-input\n      gds-text-primary\n      textarea\n    \"\n    [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n    [maxRows]=\"8\"\n  >\n    <textarea\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      rows=\"1\"\n      (input)=\"handleChange($event)\"\n      (keydown.enter)=\"handleSubmit($event)\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      >{{ value() }}</textarea\n    >\n  </gds-auto-growing-text-area>\n  <div\n    #slot\n    class=\"gds-display-contents\"\n    [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n  >\n    <ng-content />\n  </div>\n</div>\n<button\n  gds-icon-button\n  class=\"\n    gds-align-self-end\n    gds-background-none\n    gds-margin-block-end-0\n    gds-mobile-right-0\n    gds-padding-0\n    gds-right-2xs\n    trailing-icon\n  \"\n  variant=\"primary\"\n  [disabled]=\"disabled() && !enableIcon()\"\n  (clicked)=\"handleSubmit()\"\n  (mouseenter)=\"iconHoveringChanged($event)\"\n  (mouseleave)=\"iconHoveringChanged($event)\"\n  [attr.aria-label]=\"iconAriaLabel()\"\n>\n  <gds-icon\n    [key]=\"icon()\"\n    class=\"\n      gds-icon-size-xs\n      gds-mobile-icon-size-2xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"] }]
+                    }, template: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-width-100-parent\n  \">\n    <gds-auto-growing-text-area\n      class=\"\n        gds-mobile-padding-block-2xs\n        gds-mobile-text-input-mobile\n        gds-padding-block-3xs\n        gds-padding-inline-2xs\n        gds-text-input\n        gds-text-primary\n        textarea\n      \"\n      [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n      [maxRows]=\"8\"\n    >\n      <textarea\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        rows=\"1\"\n        (input)=\"handleChange($event)\"\n        (keydown.enter)=\"handleSubmit($event)\"\n        [attr.aria-label]=\"textareaAriaLabel()\"\n        >{{ value() }}</textarea\n      >\n    </gds-auto-growing-text-area>\n    <div\n      #slot\n      class=\"gds-display-contents\"\n      [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n    >\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n  <button\n    gds-icon-button\n    class=\"\n      gds-align-self-end\n      gds-background-none\n      gds-margin-block-end-0\n      gds-mobile-right-0\n      gds-padding-0\n      gds-right-2xs\n      trailing-icon\n    \"\n    variant=\"primary\"\n    [disabled]=\"disabled() && !enableIcon()\"\n    (clicked)=\"handleSubmit()\"\n    (mouseenter)=\"iconHoveringChanged($event)\"\n    (mouseleave)=\"iconHoveringChanged($event)\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n  >\n    <gds-icon\n      [key]=\"icon()\"\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-2xs\n      \"\n    />\n  </button>\n</div>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suppressClearOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnSubmit", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], textareaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaAriaLabel", required: false }] }], sendButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonAriaLabel", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], textarea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GdsNativeTextareaDirective), { isSignal: true }] }], slot: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
 
 class GdsChatPromptComponent {
@@ -8644,11 +8726,31 @@ class GdsModule {
                 cdnUrl = 'https://cdn.test.cortoaws.com';
                 break;
         }
+        const icon = gdsBrandIconIcon; //the icon object from the icons/index.ts file
+        switch (brand) {
+            // override the data property depending on the brand
+            case GDS_BRANDS.Acctivity:
+                icon.data = gdsAcctivityIconDefaultIcon.data;
+                break;
+            case GDS_BRANDS.LawY:
+                icon.data = gdsLawyIconLightDefaultIcon.data;
+                break;
+            case GDS_BRANDS.Leap:
+                icon.data = gdsLeapIconBlueIcon.data;
+                break;
+            case GDS_BRANDS.CortoDark:
+                icon.data = gdsCortoIconDarkDefaultIcon.data;
+                break;
+            default:
+                icon.data = gdsCortoIconLightDefaultIcon.data;
+                break;
+        }
         return {
             ngModule: GdsModule,
             providers: [
                 provideSvgIconsConfig({
-                    defaultSize: 'sm'
+                    defaultSize: 'sm',
+                    icons: [icon]
                 }),
                 provideAppInitializer(() => {
                     const deviceSignalService = inject(DeviceDetectorSignalService);