npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (773) hide show

package/dist/esm/vds-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vds-dialog.entry.js","sources":["src/components/dialog/vds-dialog.scss?tag=vds-dialog&encapsulation=shadow","src/components/dialog/vds-dialog.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n .vds__dialog__trigger {\n display: inline-block;\n }\n\n .vds__dialog {\n background-color: unset;\n color: unset;\n margin: auto;\n border: none;\n outline: none;\n padding: 0;\n &.vds__dialog__container--open {\n display: flex;\n justify-content: center;\n padding: 1.3rem;\n }\n &.vds__dialog--backdrop::backdrop {\n background: var(--color-interaction-black-lower);\n }\n &.vds__dialog--no-backdrop {\n overlay: auto !important;\n position: fixed;\n inset-block-start: 0px;\n inset-block-end: 0px;\n user-select: text;\n visibility: visible;\n overflow: auto;\n }\n }\n\n .vds__dialog__container {\n display: flex;\n max-width: 37.5rem;\n padding: var(--spacing-07);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--radius-large);\n background: var(--surface-medium);\n position: relative;\n z-index: var(--elevation-layer-3);\n box-shadow:\n var(--elevation-shadow-3),\n inset 0 0 0 0.0625rem var(--color-border-lowest);\n\n @each $key, $value in $spacing {\n &.vds__dialog__spacing--spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State, Listen } from \"@stencil/core/internal\";\nimport { Spacing } from \"../../definitions/spacing\";\nimport { combineClasses } from \"../../utils/combine-classes\";\n\n@Component({\n tag: \"vds-dialog\",\n styleUrl: \"vds-dialog.scss\",\n shadow: true,\n})\nexport class VdsDialog {\n /** Sets the padding around the dialog /\n @Prop() padding: Spacing = \"spacing-07\";\n /* Toggles the background behind the dialog /\n @Prop() backdrop: boolean = true;\n /* Sets the width size of the dialog /\n @Prop() width: string = \"37.5rem\";\n /* Sets the minimum width size of the dialog /\n @Prop() minWidth: string = \"20rem\";\n /* Sets the maximum width size of the dialog /\n @Prop() maxWidth: string = \"80%\";\n /* Avoids user to close dialog by clicking outside /\n @Prop() preventOutsideClose: boolean = false;\n\n /* Emits the event when opens dialog /\n @Event() opened: EventEmitter<string>;\n /* Emits the event when opens dialog /\n @Event() closed: EventEmitter<string>;\n\n @State() isOpen: boolean = undefined;\n\n @Element() host: HTMLElement;\n\n private dialog: HTMLDialogElement;\n private trigger: HTMLElement;\n\n componentDidLoad(): void {\n this.setHTMLElementEvents();\n }\n\n /\n Opens the dialog element. This method displays the dialog modally\n * with a backdrop if the `backdrop` property is set to `true`. Otherwise,\n * it opens the dialog non-modally without a backdrop.\n \n @returns {Promise<void>} A promise that resolves when the dialog is opened.\n /\n @Method()\n open(): Promise<void> {\n this.isOpen = true;\n this.backdrop ? this.dialog.showModal() : this.dialog.open = true;\n this.opened.emit();\n return Promise.resolve();\n }\n\n /\n Closes the dialog element. This method hides the dialog.\n \n @returns {Promise<void>} A promise that resolves when the dialog is closed.\n /\n @Method()\n close(): Promise<void> {\n this.isOpen = false;\n this.dialog.close();\n this.closed.emit();\n return Promise.resolve();\n }\n\n /\n Returns the main element container of the dialog.\n \n @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.\n /\n @Method()\n getContainer(): Promise<HTMLDialogElement> {\n return Promise.resolve(this.dialog);\n }\n\n /\n Listens for \"closeButton\" events on the children elements.\n * This method calls the `close()` method to close the dialog when the button is clicked.\n \n @returns {void}\n /\n @Listen(\"closeButton\")\n closeButtonHandle(): void {\n this.close();\n }\n\n /\n Listens for \"keydown\" events on the children elements, when the Escape key is press down\n * it closes the dialog.\n \n @returns {void}\n /\n @Listen('keydown')\n handleEscKey(ev: KeyboardEvent): void {\n if (ev.key === \"Escape\"){\n this.close();\n }\n }\n\n /\n Opens the dialog when the trigger element is clicked\n \n @returns {void}\n /\n handleClick(): void {\n this.open();\n }\n\n /\n Closes the dialog when the backdrop element is clicked.\n * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target\n * the DIALOG element; when clicking on the content it returns the element that was click.\n \n @returns {void}\n /\n handleClose(evt: Event): void {\n if (this.backdrop && !this.preventOutsideClose && (evt.target as HTMLElement).nodeName === \"DIALOG\") {\n this.close();\n }\n }\n\n /\n @private\n * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).\n \n @returns {Object} An object containing CSS styles for the component.\n /\n private setStyles(): { [key: string]: string } {\n const styles: any = {};\n\n styles.width = this.width;\n styles.minWidth = this.minWidth;\n styles.maxWidth = this.maxWidth;\n\n return styles;\n }\n\n /\n @private\n * Sets up event listeners for the dialog component elements.\n \n - Listens for \"click\" events on the `trigger` element and calls `handleClick`.\n * - Listens for \"click\" events on the `dialog` element and calls `handleClose`.\n \n /\n private setHTMLElementEvents(): void {\n this.trigger.addEventListener(\"click\", this.handleClick.bind(this));\n this.dialog.addEventListener(\"click\", this.handleClose.bind(this));\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n <div\n ref={(el): void => {\n if (el) {\n this.trigger = el;\n }\n }}\n class={\"vds__dialog__trigger\"}\n >\n <slot name=\"dialog-trigger\"></slot>\n </div>\n <dialog\n ref={(el): void => {\n if (el) {\n this.dialog = el;\n }\n }}\n style={{maxWidth: this.maxWidth}}\n class={combineClasses(\n \"vds__dialog\",\n this.backdrop ? \"vds__dialog--backdrop\" : \"vds__dialog--no-backdrop\",\n this.isOpen ? \"vds__dialog__container--open\" : \"\"\n )}\n >\n <div\n class={combineClasses(\n \"vds__dialog__container\",\n `vds__dialog__spacing--${this.padding}`\n )}\n style={this.setStyles()}\n >\n <slot></slot>\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,~~g3iCAAg3iC~~;;~~MCUx3iC~~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"}
1	+ {"version":3,"file":"vds-dialog.entry.js","sources":["src/components/dialog/vds-dialog.scss?tag=vds-dialog&encapsulation=shadow","src/components/dialog/vds-dialog.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n .vds__dialog__trigger {\n display: inline-block;\n }\n\n .vds__dialog {\n background-color: unset;\n color: unset;\n margin: auto;\n border: none;\n outline: none;\n padding: 0;\n &.vds__dialog__container--open {\n display: flex;\n justify-content: center;\n padding: 1.3rem;\n }\n &.vds__dialog--backdrop::backdrop {\n background: var(--color-interaction-black-lower);\n }\n &.vds__dialog--no-backdrop {\n overlay: auto !important;\n position: fixed;\n inset-block-start: 0px;\n inset-block-end: 0px;\n user-select: text;\n visibility: visible;\n overflow: auto;\n }\n }\n\n .vds__dialog__container {\n display: flex;\n max-width: 37.5rem;\n padding: var(--spacing-07);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--radius-large);\n background: var(--surface-medium);\n position: relative;\n z-index: var(--elevation-layer-3);\n box-shadow:\n var(--elevation-shadow-3),\n inset 0 0 0 0.0625rem var(--color-border-lowest);\n\n @each $key, $value in $spacing {\n &.vds__dialog__spacing--spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State, Listen } from \"@stencil/core/internal\";\nimport { Spacing } from \"../../definitions/spacing\";\nimport { combineClasses } from \"../../utils/combine-classes\";\n\n@Component({\n tag: \"vds-dialog\",\n styleUrl: \"vds-dialog.scss\",\n shadow: true,\n})\nexport class VdsDialog {\n /** Sets the padding around the dialog /\n @Prop() padding: Spacing = \"spacing-07\";\n /* Toggles the background behind the dialog /\n @Prop() backdrop: boolean = true;\n /* Sets the width size of the dialog /\n @Prop() width: string = \"37.5rem\";\n /* Sets the minimum width size of the dialog /\n @Prop() minWidth: string = \"20rem\";\n /* Sets the maximum width size of the dialog /\n @Prop() maxWidth: string = \"80%\";\n /* Avoids user to close dialog by clicking outside /\n @Prop() preventOutsideClose: boolean = false;\n\n /* Emits the event when opens dialog /\n @Event() opened: EventEmitter<string>;\n /* Emits the event when opens dialog /\n @Event() closed: EventEmitter<string>;\n\n @State() isOpen: boolean = undefined;\n\n @Element() host: HTMLElement;\n\n private dialog: HTMLDialogElement;\n private trigger: HTMLElement;\n\n componentDidLoad(): void {\n this.setHTMLElementEvents();\n }\n\n /\n Opens the dialog element. This method displays the dialog modally\n * with a backdrop if the `backdrop` property is set to `true`. Otherwise,\n * it opens the dialog non-modally without a backdrop.\n \n @returns {Promise<void>} A promise that resolves when the dialog is opened.\n /\n @Method()\n open(): Promise<void> {\n this.isOpen = true;\n this.backdrop ? this.dialog.showModal() : this.dialog.open = true;\n this.opened.emit();\n return Promise.resolve();\n }\n\n /\n Closes the dialog element. This method hides the dialog.\n \n @returns {Promise<void>} A promise that resolves when the dialog is closed.\n /\n @Method()\n close(): Promise<void> {\n this.isOpen = false;\n this.dialog.close();\n this.closed.emit();\n return Promise.resolve();\n }\n\n /\n Returns the main element container of the dialog.\n \n @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.\n /\n @Method()\n getContainer(): Promise<HTMLDialogElement> {\n return Promise.resolve(this.dialog);\n }\n\n /\n Listens for \"closeButton\" events on the children elements.\n * This method calls the `close()` method to close the dialog when the button is clicked.\n \n @returns {void}\n /\n @Listen(\"closeButton\")\n closeButtonHandle(): void {\n this.close();\n }\n\n /\n Listens for \"keydown\" events on the children elements, when the Escape key is press down\n * it closes the dialog.\n \n @returns {void}\n /\n @Listen('keydown')\n handleEscKey(ev: KeyboardEvent): void {\n if (ev.key === \"Escape\"){\n this.close();\n }\n }\n\n /\n Opens the dialog when the trigger element is clicked\n \n @returns {void}\n /\n handleClick(): void {\n this.open();\n }\n\n /\n Closes the dialog when the backdrop element is clicked.\n * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target\n * the DIALOG element; when clicking on the content it returns the element that was click.\n \n @returns {void}\n /\n handleClose(evt: Event): void {\n if (this.backdrop && !this.preventOutsideClose && (evt.target as HTMLElement).nodeName === \"DIALOG\") {\n this.close();\n }\n }\n\n /\n @private\n * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).\n \n @returns {Object} An object containing CSS styles for the component.\n /\n private setStyles(): { [key: string]: string } {\n const styles: any = {};\n\n styles.width = this.width;\n styles.minWidth = this.minWidth;\n styles.maxWidth = this.maxWidth;\n\n return styles;\n }\n\n /\n @private\n * Sets up event listeners for the dialog component elements.\n \n - Listens for \"click\" events on the `trigger` element and calls `handleClick`.\n * - Listens for \"click\" events on the `dialog` element and calls `handleClose`.\n \n /\n private setHTMLElementEvents(): void {\n this.trigger.addEventListener(\"click\", this.handleClick.bind(this));\n this.dialog.addEventListener(\"click\", this.handleClose.bind(this));\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n <div\n ref={(el): void => {\n if (el) {\n this.trigger = el;\n }\n }}\n class={\"vds__dialog__trigger\"}\n >\n <slot name=\"dialog-trigger\"></slot>\n </div>\n <dialog\n ref={(el): void => {\n if (el) {\n this.dialog = el;\n }\n }}\n style={{maxWidth: this.maxWidth}}\n class={combineClasses(\n \"vds__dialog\",\n this.backdrop ? \"vds__dialog--backdrop\" : \"vds__dialog--no-backdrop\",\n this.isOpen ? \"vds__dialog__container--open\" : \"\"\n )}\n >\n <div\n class={combineClasses(\n \"vds__dialog__container\",\n `vds__dialog__spacing--${this.padding}`\n )}\n style={this.setStyles()}\n >\n <slot></slot>\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,u5jCAAu5jC,CAAC;;MCUv6jC,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAY,YAAY;;AAE/B,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;;AAEvB,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;;AAE1B,QAAA,IAAQ,CAAA,QAAA,GAAW,OAAO;;AAE1B,QAAA,IAAQ,CAAA,QAAA,GAAW,KAAK;;AAExB,QAAA,IAAmB,CAAA,mBAAA,GAAY,KAAK;AAOnC,QAAA,IAAM,CAAA,MAAA,GAAY,SAAS;AAmKrC;IA5JC,gBAAgB,GAAA;QACd,IAAI,CAAC,oBAAoB,EAAE;;AAG7B;;;;;;AAMG;IAEH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI;AACjE,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AAClB,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE;;AAG1B;;;;AAIG;IAEH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AAClB,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE;;AAG1B;;;;AAIG;IAEH,YAAY,GAAA;QACV,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGrC;;;;;AAKG;IAEH,iBAAiB,GAAA;QACf,IAAI,CAAC,KAAK,EAAE;;AAGd;;;;;AAKG;AAEH,IAAA,YAAY,CAAC,EAAiB,EAAA;AAC5B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAC;YACtB,IAAI,CAAC,KAAK,EAAE;;;AAIhB;;;;AAIG;IACH,WAAW,GAAA;QACT,IAAI,CAAC,IAAI,EAAE;;AAGb;;;;;;AAMG;AACH,IAAA,WAAW,CAAC,GAAU,EAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAK,GAAG,CAAC,MAAsB,CAAC,QAAQ,KAAK,QAAQ,EAAE;YACnG,IAAI,CAAC,KAAK,EAAE;;;AAIhB;;;;;AAKG;IACK,SAAS,GAAA;QACf,MAAM,MAAM,GAAQ,EAAE;AAEtB,QAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;AACzB,QAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AAC/B,QAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AAE/B,QAAA,OAAO,MAAM;;AAGf;;;;;;;AAOG;IACK,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACnE,QAAA,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;IAGpE,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAU;gBAChB,IAAI,EAAE,EAAE;AACN,oBAAA,IAAI,CAAC,OAAO,GAAG,EAAE;;AAErB,aAAC,EACD,KAAK,EAAE,sBAAsB,EAAA,EAE7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,EAAA,CAAQ,CAC/B,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAU;gBAChB,IAAI,EAAE,EAAE;AACN,oBAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;AAEpB,aAAC,EACD,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,KAAK,EAAE,cAAc,CACnB,aAAa,EACb,IAAI,CAAC,QAAQ,GAAG,uBAAuB,GAAG,0BAA0B,EACpE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,EAAE,CAClD,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE,cAAc,CACnB,wBAAwB,EACxB,CAAyB,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,CACxC,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACX,CACC,CACJ;;;;;;;;"}

package/dist/esm/vds-footer.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
-import { s as setNodeObserver } from './node-utils-CG_RZPHo.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-YrP3OJ_T.js';
+import { s as setNodeObserver } from './node-utils-Ds4TZ2g7.js';
-const vdsFooterCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block}:host .vds__footer--container{height:1.25rem;display:flex;align-items:center;gap:var(--spacing-05);padding:var(--spacing-03) var(--spacing-07);background-color:var(--surface-lower)}:host .vds__footer--container .vds__footer--app-version{color:var(--color-text-medium);font-family:\"Roboto Flex\", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;flex:1 0 0}:host .vds__footer--container .vds__footer--info{color:var(--color-text-medium);font-family:\"Roboto Flex\", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;display:flex;align-items:center;justify-content:center;flex:1 0 0}:host .vds__footer--container .vds__footer--info div{display:flex;align-items:center}:host .vds__footer--container .vds__footer--info div.vds__footer--powerby{margin-left:0.5rem}:host .vds__footer--container .vds__footer--info div.vds__footer--powerby span{margin-right:0.25rem}:host .vds__footer--container .vds__footer--slot{display:flex;align-items:center;justify-content:flex-end;flex:1 0 0}:host .vds__footer--expandable{height:auto;overflow:hidden;padding:var(--spacing-03) var(--spacing-07);background-color:var(--surface-lower)}:host .vds__footer--expandable.top{border-bottom:1px solid var(--color-border-low)}:host .vds__footer--expandable.bottom{border-top:1px solid var(--color-border-low)}:host .vds__footer--slot-start,:host .vds__footer--slot-center,:host .vds__footer--slot-end{display:flex;align-items:center;flex:1}:host .vds__footer--slot-start{justify-content:flex-start}:host .vds__footer--slot-center{justify-content:center}:host .vds__footer--slot-end{justify-content:flex-end}@media only screen and (max-width: 77.4375rem){:host>.vds__footer--container>.vds__footer--info>div.vds__footer--powerby{display:none}}@media only screen and (max-width: 56.5rem){:host .vds__footer--container .vds__footer--slot{flex:0}:host .vds__footer--container .vds__footer--slot>*:not(.vds__footer--expand-button){display:none}:host .vds__footer--container .vds__footer--slot:not(.has-expandable-button){display:none}:host .vds__footer--container .vds__footer--info,:host .vds__footer--container .vds__footer--slot-center{justify-content:flex-end}:host .vds__footer--container .vds__footer--slot-end{display:none}}";
+const vdsFooterCss = () => `:root{font-family:"Roboto Flex", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}@font-face{font-family:"Roboto Flex";src:url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");font-weight:100 1000;font-stretch:25% 151%;font-style:normal}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-white-medium:rgba(255, 255, 255, 0.6392156863);--static-white-low:rgba(255, 255, 255, 0.3215686275);--static-white-lower:rgba(255, 255, 255, 0.1607843137);--static-white-lowest:rgba(255, 255, 255, 0.1215686275);--static-black:#000000;--static-black-medium:rgba(0, 0, 0, 0.6392156863);--static-black-low:rgba(0, 0, 0, 0.3215686275);--static-black-lower:rgba(0, 0, 0, 0.1607843137);--static-black-lowest:rgba(0, 0, 0, 0.1215686275);--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block}:host .vds__footer--container{height:1.25rem;display:flex;align-items:center;gap:var(--spacing-05);padding:var(--spacing-03) var(--spacing-07);background-color:var(--surface-lower)}:host .vds__footer--container .vds__footer--app-version{color:var(--color-text-medium);font-family:"Roboto Flex", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;flex:1 0 0}:host .vds__footer--container .vds__footer--info{color:var(--color-text-medium);font-family:"Roboto Flex", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;display:flex;align-items:center;justify-content:center;flex:1 0 0}:host .vds__footer--container .vds__footer--info div{display:flex;align-items:center}:host .vds__footer--container .vds__footer--info div.vds__footer--powerby{margin-left:0.5rem}:host .vds__footer--container .vds__footer--info div.vds__footer--powerby span{margin-right:0.25rem}:host .vds__footer--container .vds__footer--slot{display:flex;align-items:center;justify-content:flex-end;flex:1 0 0}:host .vds__footer--expandable{height:auto;overflow:hidden;padding:var(--spacing-03) var(--spacing-07);background-color:var(--surface-lower)}:host .vds__footer--expandable.top{border-bottom:1px solid var(--color-border-low)}:host .vds__footer--expandable.bottom{border-top:1px solid var(--color-border-low)}:host .vds__footer--slot-start,:host .vds__footer--slot-center,:host .vds__footer--slot-end{display:flex;align-items:center;flex:1}:host .vds__footer--slot-start{justify-content:flex-start}:host .vds__footer--slot-center{justify-content:center}:host .vds__footer--slot-end{justify-content:flex-end}@media only screen and (max-width: 77.4375rem){:host>.vds__footer--container>.vds__footer--info>div.vds__footer--powerby{display:none}}@media only screen and (max-width: 56.5rem){:host .vds__footer--container .vds__footer--slot{flex:0}:host .vds__footer--container .vds__footer--slot>*:not(.vds__footer--expand-button){display:none}:host .vds__footer--container .vds__footer--slot:not(.has-expandable-button){display:none}:host .vds__footer--container .vds__footer--info,:host .vds__footer--container .vds__footer--slot-center{justify-content:flex-end}:host .vds__footer--container .vds__footer--slot-end{display:none}}`;
 const VdsFooter = class {
     constructor(hostRef) {
@@ -69,13 +69,11 @@ const VdsFooter = class {
         return (h("div", { class: "vds__footer--container" }, h("div", { class: "vds__footer--slot-start" }, h("slot", { name: "start" })), h("div", { class: "vds__footer--slot-center" }, h("slot", { name: "center" })), h("div", { class: "vds__footer--slot-end" }, h("slot", { name: "end" }))));
     }
     render() {
-        return (h(Host, { key: '129c009652b8c9afedd9c377fe6e9571602f991c' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: '209570fb5e2fc80db736341a05dabc63e0dc676f', class: "vds__footer--expandable top" }, h("slot", { key: 'dfa5f2cd517faab158479a04eb3ce8fbc6c41ea1', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '2a4eebb4f378025fe2819a8b9fd3169dcb71fdef', class: "vds__footer--expandable bottom" }, h("slot", { key: '77b7d2479448eb462a1f1a3227a1e3fcc12034c1', name: "expandable-content" })))));
+        return (h(Host, { key: '1dee5304ff56ab8439681fe735cb57b90649a722' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: 'b64defa7afd3919b7cce983af4f33b51dd6b3936', class: "vds__footer--expandable top" }, h("slot", { key: '5fa14243f860574dd44829cf3c3d35dde6305668', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '1b7b8351a5a93a52d2b835ed2489dc26af66f07c', class: "vds__footer--expandable bottom" }, h("slot", { key: '85d75bc2b1b7fe67f66021deda4009cf8219511f', name: "expandable-content" })))));
     }
     get host() { return getElement(this); }
 };
-VdsFooter.style = vdsFooterCss;
+VdsFooter.style = vdsFooterCss();
 export { VdsFooter as vds_footer };
 //# sourceMappingURL=vds-footer.entry.js.map
-//# sourceMappingURL=vds-footer.entry.js.map

package/dist/esm/vds-footer.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vds-footer.entry.js","sources":["src/components/footer/vds-footer.scss?tag=vds-footer&encapsulation=shadow","src/components/footer/vds-footer.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n@mixin footerText() {\n color: var(--color-text-medium);\n @include font-style(title, 2x-small);\n}\n\n:host {\n display: block;\n\n .vds__footer--container {\n height: 1.25rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-05);\n padding: var(--spacing-03) var(--spacing-07);\n background-color: var(--surface-lower);\n\n .vds__footer--app-version {\n @include footerText();\n flex: 1 0 0;\n }\n\n .vds__footer--info {\n @include footerText();\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 0;\n\n div {\n display: flex;\n align-items: center;\n }\n\n div.vds__footer--powerby {\n margin-left: 0.5rem;\n\n span {\n margin-right: 0.25rem;\n }\n }\n }\n\n .vds__footer--slot {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1 0 0;\n }\n }\n\n .vds__footer--expandable {\n height: auto;\n overflow: hidden;\n padding: var(--spacing-03) var(--spacing-07);\n background-color: var(--surface-lower);\n\n &.top {\n border-bottom: 1px solid var(--color-border-low);\n }\n\n &.bottom {\n border-top: 1px solid var(--color-border-low);\n }\n }\n\n .vds__footer--slot-start,\n .vds__footer--slot-center,\n .vds__footer--slot-end {\n display: flex;\n align-items: center;\n flex: 1;\n }\n\n .vds__footer--slot-start {\n justify-content: flex-start;\n }\n\n .vds__footer--slot-center {\n justify-content: center;\n }\n\n .vds__footer--slot-end {\n justify-content: flex-end;\n }\n}\n\n@media only screen and (max-width: 77.4375rem) {\n :host > .vds__footer--container > .vds__footer--info > div.vds__footer--powerby {\n display: none;\n }\n}\n\n@media only screen and (max-width: 56.5rem) {\n :host {\n .vds__footer--container {\n .vds__footer--slot {\n flex: 0;\n\n > :not(.vds__footer--expand-button) {\n display: none;\n }\n\n &:not(.has-expandable-button) {\n display: none;\n }\n }\n\n .vds__footer--info,\n .vds__footer--slot-center {\n justify-content: flex-end;\n }\n\n .vds__footer--slot-end {\n display: none;\n }\n }\n }\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Element, State } from '@stencil/core/internal';\nimport { setNodeObserver } from '../../utils/node-utils';\n\n@Component({\n tag: 'vds-footer',\n styleUrl: 'vds-footer.scss',\n shadow: true,\n})\nexport class VdsFooter {\n /\n Sets the type for the footer, expandable shows an extra layer of the footer.\n * Default is only what is visible.\n * and custom allows to set the content of the footer.\n /\n @Prop() type: 'default' \| 'expandable' \| 'custom' = 'default';\n /* Sets the app version to be display in the footer /\n @Prop() appVersion: string;\n /* Sets the expanded content position, default is bottom /\n @Prop() expandedContentPosition: 'top' \| 'bottom' = 'bottom';\n /* Defines the text in the central block of the footer /\n @Prop({ mutable: true }) centralText: string = 'Wabtec Corporation. All rights reserved.';\n /* Modify the text in the \"powered by\" section of the footer */\n @Prop() poweredByText: string = 'Powered by';\n\n @Element() host: HTMLStencilElement;\n\n @State() isExpanded: boolean = false;\n\n private currentYear: number;\n private observer: MutationObserver;\n\n componentWillRender(): void {\n this.setFooterOptions();\n }\n\n componentWillLoad(): void {\n this.setCurrentYear();\n }\n\n componentDidLoad(): void {\n this.observer = setNodeObserver(this.setFooterOptions, this.host, this);\n }\n\n disconnectedCallback(): void {\n this.observer.disconnect();\n }\n\n private setFooterOptions(): void {\n if (this.type !== 'custom') {\n Array.from(this.host.children).forEach(child => {\n if (child.nodeName !== 'VDS-LINK' && child.slot !== 'expandable-content') {\n child.remove();\n }\n });\n }\n this.setSeparators();\n }\n\n private setSeparators(): void {\n const linkElements = Array.from(this.host.children).filter(\n (child: HTMLElement) => child.nodeName === 'VDS-LINK',\n );\n if (linkElements.length <= 1) return;\n for (let i = linkElements.length - 1; i > 0; i--) {\n const divider = document.createElement('vds-divider');\n divider.setAttribute('orientation', 'vertical');\n divider.setAttribute('padding', 'spacing-01');\n divider.style.setProperty('height', '1.25rem');\n this.host.insertBefore(divider, linkElements[i]);\n }\n }\n\n private setCurrentYear(): void {\n this.currentYear = new Date().getFullYear();\n }\n\n private toggleExpand(): void {\n this.isExpanded = !this.isExpanded;\n }\n\n private renderExpandableButton(): HTMLStencilElement {\n if (this.type === 'expandable') {\n return (\n <vds-icon-button\n class=\"vds__footer--expand-button\"\n variant=\"secondary\"\n size=\"small\"\n onClick={() => this.toggleExpand()}\n icon={this.isExpanded ? 'chevron-up' : 'chevron-down'}\n />\n );\n }\n }\n\n private renderCustomFooter(): HTMLElement {\n return (\n <div class=\"vds__footer--container\">\n <div class=\"vds__footer--slot-start\">\n <slot name=\"start\" />\n </div>\n <div class=\"vds__footer--slot-center\">\n <slot name=\"center\" />\n </div>\n <div class=\"vds__footer--slot-end\">\n <slot name=\"end\" />\n </div>\n </div>\n );\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n {this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (\n <div class=\"vds__footer--expandable top\">\n <slot name=\"expandable-content\" />\n </div>\n )}\n {this.type === 'custom' ? (\n this.renderCustomFooter()\n ) : (\n <div class={'vds__footer--container'}>\n <div class={'vds__footer--app-version'}>{this.appVersion}</div>\n <div class={'vds__footer--info'}>\n <div>© {this.currentYear} {this.centralText}</div>\n <div class={'vds__footer--powerby'}>\n <span>{this.poweredByText}</span>\n <vds-icon size=\"2.95775rem,1rem\" color=\"color-icon-medium\" svgIcon={'wabtec-grey-logo'}></vds-icon>\n </div>\n </div>\n <div class={`vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}`}>\n <slot />\n {this.renderExpandableButton()}\n </div>\n </div>\n )}\n {this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (\n <div class=\"vds__footer--expandable bottom\">\n <slot name=\"expandable-content\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,m6hCAAm6hC;;MCS36hC,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwC,SAAS;;AAIrD,QAAA,IAAuB,CAAA,uBAAA,GAAqB,QAAQ;;AAEnC,QAAA,IAAW,CAAA,WAAA,GAAW,0CAA0C;;AAEjF,QAAA,IAAa,CAAA,aAAA,GAAW,YAAY;AAInC,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAsHrC;IAjHC,mBAAmB,GAAA;QACjB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAGvB,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;;IAGzE,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;IAGpB,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC1B,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,IAAG;AAC7C,gBAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,UAAU,IAAI,KAAK,CAAC,IAAI,KAAK,oBAAoB,EAAE;oBACxE,KAAK,CAAC,MAAM,EAAE;;AAElB,aAAC,CAAC;;QAEJ,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;QACnB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxD,CAAC,KAAkB,KAAK,KAAK,CAAC,QAAQ,KAAK,UAAU,CACtD;AACD,QAAA,IAAI,YAAY,CAAC,MAAM,IAAI,CAAC;YAAE;AAC9B,QAAA,KAAK,IAAI,CAAC,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC;AACrD,YAAA,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC;AAC/C,YAAA,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC;YAC7C,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;AAC9C,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;;;IAI5C,cAAc,GAAA;QACpB,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;;IAGrC,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;IAG5B,sBAAsB,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC9B,QACE,CACE,CAAA,iBAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,cAAc,EAAA,CACrD;;;IAKA,kBAAkB,GAAA;AACxB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,uBAAuB,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,KACtF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,oBAAoB,EAAA,CAAG,CAC9B,CACP,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IACrB,IAAI,CAAC,kBAAkB,EAAE,KAEzB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,wBAAwB,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,0BAA0B,IAAG,IAAI,CAAC,UAAU,CAAO,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC7B,CAAA,CAAA,KAAA,EAAA,IAAA,aAAQ,IAAI,CAAC,WAAW,OAAG,IAAI,CAAC,WAAW,CAAO,EAClD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,sBAAsB,EAAA,EAChC,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,IAAI,CAAC,aAAa,CAAQ,EACjC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,kBAAkB,EAAA,CAAa,CAC/F,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,kBAAA,EAAqB,IAAI,CAAC,IAAI,KAAK,YAAY,GAAG,uBAAuB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC1F,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,EACP,IAAI,CAAC,sBAAsB,EAAE,CAC1B,CACF,CACP,EACA,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,uBAAuB,KAAK,QAAQ,IAAI,IAAI,CAAC,UAAU,KACzF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EACzC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAA,CAAG,CAC9B,CACP,CACI;;;;;;;;"}
1	+ {"version":3,"file":"vds-footer.entry.js","sources":["src/components/footer/vds-footer.scss?tag=vds-footer&encapsulation=shadow","src/components/footer/vds-footer.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n@mixin footerText() {\n color: var(--color-text-medium);\n @include font-style(title, 2x-small);\n}\n\n:host {\n display: block;\n\n .vds__footer--container {\n height: 1.25rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-05);\n padding: var(--spacing-03) var(--spacing-07);\n background-color: var(--surface-lower);\n\n .vds__footer--app-version {\n @include footerText();\n flex: 1 0 0;\n }\n\n .vds__footer--info {\n @include footerText();\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 0;\n\n div {\n display: flex;\n align-items: center;\n }\n\n div.vds__footer--powerby {\n margin-left: 0.5rem;\n\n span {\n margin-right: 0.25rem;\n }\n }\n }\n\n .vds__footer--slot {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1 0 0;\n }\n }\n\n .vds__footer--expandable {\n height: auto;\n overflow: hidden;\n padding: var(--spacing-03) var(--spacing-07);\n background-color: var(--surface-lower);\n\n &.top {\n border-bottom: 1px solid var(--color-border-low);\n }\n\n &.bottom {\n border-top: 1px solid var(--color-border-low);\n }\n }\n\n .vds__footer--slot-start,\n .vds__footer--slot-center,\n .vds__footer--slot-end {\n display: flex;\n align-items: center;\n flex: 1;\n }\n\n .vds__footer--slot-start {\n justify-content: flex-start;\n }\n\n .vds__footer--slot-center {\n justify-content: center;\n }\n\n .vds__footer--slot-end {\n justify-content: flex-end;\n }\n}\n\n@media only screen and (max-width: 77.4375rem) {\n :host > .vds__footer--container > .vds__footer--info > div.vds__footer--powerby {\n display: none;\n }\n}\n\n@media only screen and (max-width: 56.5rem) {\n :host {\n .vds__footer--container {\n .vds__footer--slot {\n flex: 0;\n\n > :not(.vds__footer--expand-button) {\n display: none;\n }\n\n &:not(.has-expandable-button) {\n display: none;\n }\n }\n\n .vds__footer--info,\n .vds__footer--slot-center {\n justify-content: flex-end;\n }\n\n .vds__footer--slot-end {\n display: none;\n }\n }\n }\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Element, State } from '@stencil/core/internal';\nimport { setNodeObserver } from '../../utils/node-utils';\n\n@Component({\n tag: 'vds-footer',\n styleUrl: 'vds-footer.scss',\n shadow: true,\n})\nexport class VdsFooter {\n /\n Sets the type for the footer, expandable shows an extra layer of the footer.\n * Default is only what is visible.\n * and custom allows to set the content of the footer.\n /\n @Prop() type: 'default' \| 'expandable' \| 'custom' = 'default';\n /* Sets the app version to be display in the footer /\n @Prop() appVersion: string;\n /* Sets the expanded content position, default is bottom /\n @Prop() expandedContentPosition: 'top' \| 'bottom' = 'bottom';\n /* Defines the text in the central block of the footer /\n @Prop({ mutable: true }) centralText: string = 'Wabtec Corporation. All rights reserved.';\n /* Modify the text in the \"powered by\" section of the footer */\n @Prop() poweredByText: string = 'Powered by';\n\n @Element() host: HTMLStencilElement;\n\n @State() isExpanded: boolean = false;\n\n private currentYear: number;\n private observer: MutationObserver;\n\n componentWillRender(): void {\n this.setFooterOptions();\n }\n\n componentWillLoad(): void {\n this.setCurrentYear();\n }\n\n componentDidLoad(): void {\n this.observer = setNodeObserver(this.setFooterOptions, this.host, this);\n }\n\n disconnectedCallback(): void {\n this.observer.disconnect();\n }\n\n private setFooterOptions(): void {\n if (this.type !== 'custom') {\n Array.from(this.host.children).forEach(child => {\n if (child.nodeName !== 'VDS-LINK' && child.slot !== 'expandable-content') {\n child.remove();\n }\n });\n }\n this.setSeparators();\n }\n\n private setSeparators(): void {\n const linkElements = Array.from(this.host.children).filter(\n (child: HTMLElement) => child.nodeName === 'VDS-LINK',\n );\n if (linkElements.length <= 1) return;\n for (let i = linkElements.length - 1; i > 0; i--) {\n const divider = document.createElement('vds-divider');\n divider.setAttribute('orientation', 'vertical');\n divider.setAttribute('padding', 'spacing-01');\n divider.style.setProperty('height', '1.25rem');\n this.host.insertBefore(divider, linkElements[i]);\n }\n }\n\n private setCurrentYear(): void {\n this.currentYear = new Date().getFullYear();\n }\n\n private toggleExpand(): void {\n this.isExpanded = !this.isExpanded;\n }\n\n private renderExpandableButton(): HTMLStencilElement {\n if (this.type === 'expandable') {\n return (\n <vds-icon-button\n class=\"vds__footer--expand-button\"\n variant=\"secondary\"\n size=\"small\"\n onClick={() => this.toggleExpand()}\n icon={this.isExpanded ? 'chevron-up' : 'chevron-down'}\n />\n );\n }\n }\n\n private renderCustomFooter(): HTMLElement {\n return (\n <div class=\"vds__footer--container\">\n <div class=\"vds__footer--slot-start\">\n <slot name=\"start\" />\n </div>\n <div class=\"vds__footer--slot-center\">\n <slot name=\"center\" />\n </div>\n <div class=\"vds__footer--slot-end\">\n <slot name=\"end\" />\n </div>\n </div>\n );\n }\n\n render(): HTMLStencilElement {\n return (\n <Host>\n {this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (\n <div class=\"vds__footer--expandable top\">\n <slot name=\"expandable-content\" />\n </div>\n )}\n {this.type === 'custom' ? (\n this.renderCustomFooter()\n ) : (\n <div class={'vds__footer--container'}>\n <div class={'vds__footer--app-version'}>{this.appVersion}</div>\n <div class={'vds__footer--info'}>\n <div>© {this.currentYear} {this.centralText}</div>\n <div class={'vds__footer--powerby'}>\n <span>{this.poweredByText}</span>\n <vds-icon size=\"2.95775rem,1rem\" color=\"color-icon-medium\" svgIcon={'wabtec-grey-logo'}></vds-icon>\n </div>\n </div>\n <div class={`vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}`}>\n <slot />\n {this.renderExpandableButton()}\n </div>\n </div>\n )}\n {this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (\n <div class=\"vds__footer--expandable bottom\">\n <slot name=\"expandable-content\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/vds-header.entry.js CHANGED Viewed

@@ -1,14 +1,18 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
-import { u as updateFloatingBoxPosition } from './floating-engine-utils-BqkUBR_p.js';
-import { q as queryElementFromShadowRoot } from './node-utils-CG_RZPHo.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-YrP3OJ_T.js';
+import { u as updateFloatingBoxPosition } from './floating-engine-utils-ClEAm9Wn.js';
+import { q as queryElementFromShadowRoot } from './node-utils-Ds4TZ2g7.js';
-const vdsHeaderCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block}:host .vds__header{display:flex;padding:var(--spacing-02) var(--spacing-07);align-items:center;gap:var(--spacing-03);flex:1 0 0;align-self:stretch;border-radius:var(--radius-sharp);background:var(--surface-lower);justify-content:end}:host .vds__header--content-section{display:flex;width:100%;justify-content:end}:host .vds__header--content-section>*{color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds__header--app-name{display:flex;max-width:1110px;height:var(--spacing-09);padding:var(--spacing-00);justify-content:flex-start;align-items:center;gap:var(--spacing-00);flex-shrink:0}:host .vds__header--app-name--content{color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds__header--user-section{display:flex;position:relative;padding:var(--spacing-00) var(--spacing-02);align-items:center;justify-content:space-between;gap:var(--spacing-02);align-self:stretch;text-wrap:nowrap}:host .vds__header--user-section:hover{border-radius:var(--radius-medium);background:var(--color-interaction-black-lowest)}:host .vds__header--user-section:focus{border:solid;border-color:var(--color-border-focus-2);border-radius:var(--radius-medium)}:host .vds__header--user-section-username{align-items:center;display:flex;color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem;white-space:nowrap}:host .vds__header--user-section-avatar{cursor:pointer}:host .vds__header--user-section-action-icon{align-items:center;display:flex;width:var(--spacing-06);height:var(--spacing-06);border-radius:var(--radius-medium);cursor:pointer}:host .d-flex{display:flex}:host .vds__header--user-section-menu-container{display:none}:host .vds__header--user-section-menu-container-opened{display:block;position:absolute;right:-1.5rem;top:var(--spacing-08);z-index:3}:host .vds__header--user-section-menu-container-opened .vds__header--user-section-menu-container-content{margin-top:6px;background:var(--surface-neutral-default);padding:var(--spacing-06) var(--spacing-05);border-radius:var(--radius-medium);box-shadow:0px 6px 6px 0px rgba(29, 46, 64, 0.1019607843)}:host .vds__header--user-section-menu-container-opened span .triangle-rotated{transform:rotate(180deg);margin-right:24px;margin-bottom:6px}:host .vds__header--user-section-menu-container-opened .vds__header--arrow-right-align{display:flex;justify-content:flex-end;position:absolute;top:0;right:8px;z-index:1}";
+const vdsHeaderCss = () => `:root{font-family:"Roboto Flex", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}@font-face{font-family:"Roboto Flex";src:url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");font-weight:100 1000;font-stretch:25% 151%;font-style:normal}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-white-medium:rgba(255, 255, 255, 0.6392156863);--static-white-low:rgba(255, 255, 255, 0.3215686275);--static-white-lower:rgba(255, 255, 255, 0.1607843137);--static-white-lowest:rgba(255, 255, 255, 0.1215686275);--static-black:#000000;--static-black-medium:rgba(0, 0, 0, 0.6392156863);--static-black-low:rgba(0, 0, 0, 0.3215686275);--static-black-lower:rgba(0, 0, 0, 0.1607843137);--static-black-lowest:rgba(0, 0, 0, 0.1215686275);--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block}:host .vds__header{display:flex;padding:var(--spacing-02) var(--spacing-07);align-items:center;gap:var(--spacing-03);flex:1 0 0;align-self:stretch;border-radius:var(--radius-sharp);background:var(--surface-lower);justify-content:end}:host .vds__header--content-section{display:flex;width:100%;justify-content:end}:host .vds__header--content-section>*{color:var(--color-text-medium);font-feature-settings:"clig" off, "liga" off;font-family:"Roboto Flex", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds__header--app-name{display:flex;max-width:1110px;height:var(--spacing-09);padding:var(--spacing-00);justify-content:flex-start;align-items:center;gap:var(--spacing-00);flex-shrink:0}:host .vds__header--app-name--content{color:var(--color-text-medium);font-feature-settings:"clig" off, "liga" off;font-family:"Roboto Flex", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds__header--user-section{display:flex;position:relative;padding:var(--spacing-00) var(--spacing-02);align-items:center;justify-content:space-between;gap:var(--spacing-02);align-self:stretch;text-wrap:nowrap}:host .vds__header--user-section:hover{border-radius:var(--radius-medium);background:var(--color-interaction-black-lowest)}:host .vds__header--user-section:focus{border:solid;border-color:var(--color-border-focus-2);border-radius:var(--radius-medium)}:host .vds__header--user-section-username{align-items:center;display:flex;color:var(--color-text-medium);font-feature-settings:"clig" off, "liga" off;font-family:"Roboto Flex", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem;white-space:nowrap}:host .vds__header--user-section-avatar{cursor:pointer}:host .vds__header--user-section-action-icon{align-items:center;display:flex;width:var(--spacing-06);height:var(--spacing-06);border-radius:var(--radius-medium);cursor:pointer}:host .d-flex{display:flex}:host .vds__header--user-section-menu-container{display:none}:host .vds__header--user-section-menu-container-opened{display:block;position:absolute;right:-1.5rem;top:var(--spacing-08);z-index:3}:host .vds__header--user-section-menu-container-opened .vds__header--user-section-menu-container-content{margin-top:6px;background:var(--surface-neutral-default);padding:var(--spacing-06) var(--spacing-05);border-radius:var(--radius-medium);box-shadow:0px 6px 6px 0px rgba(29, 46, 64, 0.1019607843)}:host .vds__header--user-section-menu-container-opened span .triangle-rotated{transform:rotate(180deg);margin-right:24px;margin-bottom:6px}:host .vds__header--user-section-menu-container-opened .vds__header--arrow-right-align{display:flex;justify-content:flex-end;position:absolute;top:0;right:8px;z-index:1}`;
 const VdsHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /** Allow hide/show User-Section */
         this.showUserSection = true;
+        /** Shows/hides badge dot to show notification or status */
+        this.showBadge = false;
+        /** Sets the status color for badge */
+        this.badgeStatusColor = "neutral";
         this.popupOpened = false;
     }
     handleClickOut(evt) {
@@ -34,24 +38,28 @@ const VdsHeader = class {
             this.floatingCleanUp && this.floatingCleanUp();
         }
     }
+    renderAvatar() {
+        if (this.showBadge) {
+            return (h("vds-badge-dot", { overlap: true, statusColor: this.badgeStatusColor, "aria-label": this.badgeAriaLabel }, h("vds-avatar", { class: "vds__header--user-section-avatar", size: "20px", value: this.avatar })));
+        }
+        return (h("vds-avatar", { class: "vds__header--user-section-avatar", size: "20px", value: this.avatar }));
+    }
     render() {
         const showUserSection = this.showUserSection;
-        return (h(Host, { key: '2ab98d90cc6d0db48ce8665a5a0734a044b15acf' }, h("header", { key: '640ef1418597996f3e6f0e5754e4964f8cb72ad6', class: `vds__header` }, h("div", { key: '8d1abb4afad7d25aa655b7ea088bd1efcfc5ef88', class: `vds__header--app-name` }, h("span", { key: '973fef9767a61c5f3f6239f65cc294e1313b0227', class: "vds__header--app-name--content" }, this.value)), h("div", { key: 'af9e2c93a0be51abfde37e9aa1687cf5066a4273', class: "vds__header--content-section" }, h("slot", { key: '2620a1e1fba0644027bd2114540d5865ef4f4e15', name: "contentSection" })), showUserSection && h("div", { key: 'a3229550a19113a2ded1434433d8c89950de30d8', class: `vds__header--user-section` }, h("span", { key: 'acc1e0fda13fd12eb33b06d2089d0b369c7761d4', class: "vds__header--user-section-username" }, this.username), h("div", { key: 'e72b9b15b8a27ad8d73d87d7a59344c624bda023', class: "d-flex", onClick: (evt) => {
+        return (h(Host, { key: 'a3291b3058c67f138348fb64703cea5651a59a2b' }, h("header", { key: '9a35636a7a6da52b4a80f269a4faaa3e2ba49b6b', class: `vds__header` }, h("div", { key: 'b36225725e1afcf1482b128ea4cb4e1595294ce3', class: `vds__header--app-name` }, h("span", { key: '6611943c238d73ad428b0146e0d8710b0eae4db2', class: "vds__header--app-name--content" }, this.value)), h("div", { key: 'ec0370f117a8aa83618a2d0a8a0928d31cebee7d', class: "vds__header--content-section" }, h("slot", { key: '595b8d555aea0ec9779356c8767fb95e9bf62e37', name: "contentSection" })), showUserSection && h("div", { key: '9a3dbb4fd0c681ed6404c1a2fd42aff1ac89b5da', class: `vds__header--user-section` }, h("span", { key: '280025d03c5a217f0b8a3242becd6a4a9e1dba76', class: "vds__header--user-section-username" }, this.username), h("div", { key: 'efdbd24f2d71fd6f02b0932398d8f8e1f72a9d6f', class: "d-flex", onClick: (evt) => {
                 this.handleClick(evt);
-            } }, h("vds-avatar", { key: 'f718bf3260a74098c4a24bc3396a0550ec81534e', class: "vds__header--user-section-avatar", size: "20px", value: this.avatar }), h("span", { key: '9d6847b3d21e7af9501a122d6bb16176b2688268', class: "vds__header--user-section-action-icon" }, h("vds-icon", { key: '50714c7282ad4dae0299962b1f541f39c8f4b603', svgIcon: "caret-down-filled", size: "20px", color: "color-icon-medium" }))), h("div", { key: '5e36afc403a1dc598f41a2c91840f4cf89582871', ref: (el) => {
+            } }, this.renderAvatar(), h("span", { key: 'b45bda5a25d8b67360cd5e0e6a768a21d016cf74', class: "vds__header--user-section-action-icon" }, h("vds-icon", { key: 'e6d1c1120bc0a7a608f570a48b28bb490dd80592', svgIcon: "caret-down-filled", size: "20px", color: "color-icon-medium" }))), h("div", { key: '5f09dafc7325fab48c3ebc1881d87f8f005ccac1', ref: (el) => {
                 if (el) {
                     this.floatingMenuElementRef = el;
                 }
-            }, class: `${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}` }, h("span", { key: 'a5b53a11502e2207a3460d85275d74dae316ed61', class: "vds__header--arrow-right-align" }, h("svg", { key: '0bfa90892bb098069bc1097216a1482f65c67805', class: "triangle-rotated", width: "13", height: "6", viewBox: "0 0 13 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ed7dd36b4166f309431bccf154a037528b0f0c0c', id: "popover-carret-filled-large", d: "M0.5 0L6.5 6L12.5 0H0.5Z", fill: "var(--surface-neutral-default)" }))), h("div", { key: '2ea036d6d6ab6b35e15d54c7840e7679773845d6', class: "vds__header--user-section-menu-container-content" }, h("slot", { key: '29373a148a50776d4a7c2b20748a3c0423faaf68', name: "profilePopupContent" })))))));
+            }, class: `${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}` }, h("span", { key: '527dc8a69608f9a887b968b0109b7afea5a2dbe3', class: "vds__header--arrow-right-align" }, h("svg", { key: 'b30245f9f74110d8976114614c56d85015ffc11f', class: "triangle-rotated", width: "13", height: "6", viewBox: "0 0 13 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8eb365d561f34b824a14573297e473f22622ea0a', id: "popover-carret-filled-large", d: "M0.5 0L6.5 6L12.5 0H0.5Z", fill: "var(--surface-neutral-default)" }))), h("div", { key: '08c008f29c056164303ac6aaae56cffeba48c73b', class: "vds__header--user-section-menu-container-content" }, h("slot", { key: '63be2e6f58bba8ec3c964c77e4af57b9e7d69095', name: "profilePopupContent" })))))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
         "popupOpened": ["handlePopupOpened"]
     }; }
 };
-VdsHeader.style = vdsHeaderCss;
+VdsHeader.style = vdsHeaderCss();
 export { VdsHeader as vds_header };
 //# sourceMappingURL=vds-header.entry.js.map
-//# sourceMappingURL=vds-header.entry.js.map

package/dist/esm/vds-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vds-header.entry.js","sources":["src/components/header/vds-header.scss?tag=vds-header&encapsulation=shadow","src/components/header/vds-header.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n\n .vds__header {\n display: flex;\n padding: var(--spacing-02) var(--spacing-07);\n align-items: center;\n gap: var(--spacing-03);\n flex: 1 0 0;\n align-self: stretch;\n border-radius: var(--radius-sharp);\n background: var(--surface-lower);\n justify-content: end;\n\n &--content-section {\n display: flex;\n width: 100%;\n justify-content: end;\n & > * {\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n }\n }\n\n &--app-name {\n display: flex;\n max-width: 1110px;\n height: var(--spacing-09);\n padding: var(--spacing-00);\n justify-content: flex-start;\n align-items: center;\n gap: var(--spacing-00);\n flex-shrink: 0;\n }\n\n &--app-name--content {\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n }\n\n &--user-section {\n display: flex;\n position: relative;\n padding: var(--spacing-00) var(--spacing-02);\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-02);\n align-self: stretch;\n text-wrap: nowrap;\n \n &:hover {\n border-radius: var(--radius-medium);\n background: var(--color-interaction-black-lowest);\n }\n \n &:focus {\n border: solid;\n border-color: var(--color-border-focus-2);\n border-radius: var(--radius-medium);\n }\n }\n\n &--user-section-username {\n align-items: center;\n display: flex;\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n white-space: nowrap;\n }\n\n &--user-section-avatar {\n cursor: pointer;\n }\n\n &--user-section-action-icon {\n align-items: center;\n display: flex;\n width: var(--spacing-06);\n height: var(--spacing-06);\n border-radius: var(--radius-medium);\n cursor: pointer;\n }\n }\n .d-flex {\n display: flex;\n }\n\n .vds__header--user-section-menu-container {\n display: none;\n }\n\n .vds__header--user-section-menu-container-opened {\n display: block;\n position: absolute;\n right: -1.5rem;\n top: var(--spacing-08);\n z-index: 3;\n\n .vds__header--user-section-menu-container-content {\n margin-top: 6px;\n background: var(--surface-neutral-default);\n padding: var(--spacing-06) var(--spacing-05);\n border-radius: var(--radius-medium);\n box-shadow: 0px 6px 6px 0px #1D2E401A;\n }\n\n span .triangle-rotated {\n transform: rotate(180deg);\n margin-right: 24px;\n margin-bottom: 6px;\n }\n\n .vds__header--arrow-right-align {\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 0;\n right: 8px;\n z-index: 1;\n }\n }\n}","import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n\n@Component({\n tag: 'vds-header',\n styleUrl: 'vds-header.scss',\n shadow: true,\n})\nexport class VdsHeader {\n /** Defines app name for header /\n @Prop() value: string;\n /* Defines the value in the avatar component /\n @Prop() avatar: string;\n /* Defines the username at the left of the avatar /\n @Prop() username!: string;\n /* Allow hide/show User-Section */\n @Prop() showUserSection: boolean = true;\n\n @Element() hostEl: HTMLElement;\n\n @State() popupOpened: boolean = false;\n\n @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n const isClickInside = this.hostEl.contains(evt.target as Node);\n if (!isClickInside) {\n this.popupOpened = false;\n }\n\t}\n private actionElementRef: HTMLElement;\n private arrowElementRef: HTMLElement;\n private floatingMenuElementRef: HTMLElement;\n\n private floatingCleanUp: () => void;\n\n componentDidLoad(){\n this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n }\n\n private handleClick(_evt: MouseEvent): void {\n _evt.stopPropagation();\n _evt.preventDefault();\n this.popupOpened = !this.popupOpened;\n }\n\n @Watch(\"popupOpened\")\n async handlePopupOpened(): Promise<void> {\n if (this.popupOpened) {\n this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n } else {\n this.floatingCleanUp && this.floatingCleanUp();\n }\n }\n\n render() {\n const showUserSection = this.showUserSection;\n return (\n <Host>\n <header class={`vds__header`}>\n <div class={`vds__header--app-name`}>\n <span class=\"vds__header--app-name--content\">{this.value}</span>\n </div>\n <div class=\"vds__header--content-section\">\n <slot name=\"contentSection\"></slot>\n </div>\n { showUserSection && <div class={`vds__header--user-section`}>\n <span class=\"vds__header--user-section-username\">{this.username}</span>\n <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}>\n <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n <span class=\"vds__header--user-section-action-icon\">\n <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n </span>\n </div>\n\n <div\n ref={(el) => {\n if (el) {\n this.floatingMenuElementRef = el;\n }\n }}\n class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n <span class=\"vds__header--arrow-right-align\">\n <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n </svg>\n </span>\n <div\n class=\"vds__header--user-section-menu-container-content\"\n >\n <slot name=\"profilePopupContent\"></slot>\n </div>\n </div>\n </div> }\n </header>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"vds-header.entry.js","sources":["src/components/header/vds-header.scss?tag=vds-header&encapsulation=shadow","src/components/header/vds-header.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n display: block;\n\n .vds__header {\n display: flex;\n padding: var(--spacing-02) var(--spacing-07);\n align-items: center;\n gap: var(--spacing-03);\n flex: 1 0 0;\n align-self: stretch;\n border-radius: var(--radius-sharp);\n background: var(--surface-lower);\n justify-content: end;\n\n &--content-section {\n display: flex;\n width: 100%;\n justify-content: end;\n & > * {\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n }\n }\n\n &--app-name {\n display: flex;\n max-width: 1110px;\n height: var(--spacing-09);\n padding: var(--spacing-00);\n justify-content: flex-start;\n align-items: center;\n gap: var(--spacing-00);\n flex-shrink: 0;\n }\n\n &--app-name--content {\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n }\n\n &--user-section {\n display: flex;\n position: relative;\n padding: var(--spacing-00) var(--spacing-02);\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-02);\n align-self: stretch;\n text-wrap: nowrap;\n \n &:hover {\n border-radius: var(--radius-medium);\n background: var(--color-interaction-black-lowest);\n }\n \n &:focus {\n border: solid;\n border-color: var(--color-border-focus-2);\n border-radius: var(--radius-medium);\n }\n }\n\n &--user-section-username {\n align-items: center;\n display: flex;\n color: var(--color-text-medium);\n font-feature-settings: 'clig' off, 'liga' off;\n @include font-style(title, extra-small);\n white-space: nowrap;\n }\n\n &--user-section-avatar {\n cursor: pointer;\n }\n\n &--user-section-action-icon {\n align-items: center;\n display: flex;\n width: var(--spacing-06);\n height: var(--spacing-06);\n border-radius: var(--radius-medium);\n cursor: pointer;\n }\n }\n .d-flex {\n display: flex;\n }\n\n .vds__header--user-section-menu-container {\n display: none;\n }\n\n .vds__header--user-section-menu-container-opened {\n display: block;\n position: absolute;\n right: -1.5rem;\n top: var(--spacing-08);\n z-index: 3;\n\n .vds__header--user-section-menu-container-content {\n margin-top: 6px;\n background: var(--surface-neutral-default);\n padding: var(--spacing-06) var(--spacing-05);\n border-radius: var(--radius-medium);\n box-shadow: 0px 6px 6px 0px #1D2E401A;\n }\n\n span .triangle-rotated {\n transform: rotate(180deg);\n margin-right: 24px;\n margin-bottom: 6px;\n }\n\n .vds__header--arrow-right-align {\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 0;\n right: 8px;\n z-index: 1;\n }\n }\n}","import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\nimport { Colors } from '../../components';\n\n@Component({\n tag: 'vds-header',\n styleUrl: 'vds-header.scss',\n shadow: true,\n})\nexport class VdsHeader {\n /** Defines app name for header /\n @Prop() value: string;\n /* Defines the value in the avatar component /\n @Prop() avatar: string;\n /* Defines the username at the left of the avatar /\n @Prop() username!: string;\n /* Allow hide/show User-Section /\n @Prop() showUserSection: boolean = true;\n /* Shows/hides badge dot to show notification or status /\n @Prop() showBadge: boolean = false;\n /* Sets the status color for badge /\n @Prop() badgeStatusColor: \"warning\" \| \"danger\" \| \"healthy\" \| \"information\" \| \"neutral\" \| Colors = \"neutral\";\n /* Sets the aria label in badge */\n @Prop() badgeAriaLabel:string;\n\n\n @Element() hostEl: HTMLElement;\n\n @State() popupOpened: boolean = false;\n\n @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n const isClickInside = this.hostEl.contains(evt.target as Node);\n if (!isClickInside) {\n this.popupOpened = false;\n }\n\t}\n private actionElementRef: HTMLElement;\n private arrowElementRef: HTMLElement;\n private floatingMenuElementRef: HTMLElement;\n\n private floatingCleanUp: () => void;\n\n componentDidLoad(){\n this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n }\n\n private handleClick(_evt: MouseEvent): void {\n _evt.stopPropagation();\n _evt.preventDefault();\n this.popupOpened = !this.popupOpened;\n }\n\n @Watch(\"popupOpened\")\n async handlePopupOpened(): Promise<void> {\n if (this.popupOpened) {\n this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n } else {\n this.floatingCleanUp && this.floatingCleanUp();\n }\n }\n\n private renderAvatar() {\n if (this.showBadge) {\n return (\n <vds-badge-dot overlap={true} statusColor={this.badgeStatusColor} aria-label={this.badgeAriaLabel}>\n <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n </vds-badge-dot>\n );\n }\n\n return (\n <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n );\n }\n\n render() {\n const showUserSection = this.showUserSection;\n return (\n <Host>\n <header class={`vds__header`}>\n <div class={`vds__header--app-name`}>\n <span class=\"vds__header--app-name--content\">{this.value}</span>\n </div>\n <div class=\"vds__header--content-section\">\n <slot name=\"contentSection\"></slot>\n </div>\n { showUserSection && <div class={`vds__header--user-section`}>\n <span class=\"vds__header--user-section-username\">{this.username}</span>\n <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}>\n {this.renderAvatar()}\n <span class=\"vds__header--user-section-action-icon\">\n <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n </span>\n </div>\n\n <div\n ref={(el) => {\n if (el) {\n this.floatingMenuElementRef = el;\n }\n }}\n class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n <span class=\"vds__header--arrow-right-align\">\n <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n </svg>\n </span>\n <div\n class=\"vds__header--user-section-menu-container-content\"\n >\n <slot name=\"profilePopupContent\"></slot>\n </div>\n </div>\n </div> }\n </header>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}