wabtec-internal-volt-basic-components 1.0.0

package/dist/esm/vds-sheet.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sheet.entry.js","sources":["src/components/sheet/vds-sheet.scss?tag=vds-sheet&encapsulation=shadow","src/components/sheet/vds-sheet.tsx"],"sourcesContent":[":host {\n  --vds-sheet-background-color: var(--surface-medium);\n  --vds-sheet-backdrop-color: var(--color-interaction-black-lower);\n  --vds-sheet-box-shadow: var(--elevation-shadow-1);\n  --vds-sheet-border-radius: 28px;\n  --vds-sheet-drag-handle-color: var(--color-icon-high);\n  --vds-sheet-transition-duration: 0.3s;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-layer-5);\n  width: 100%;\n  height: fit-content;\n\n  .vds-sheet__backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--vds-sheet-backdrop-color);\n    opacity: 0;\n    transition: opacity var(--vds-sheet-transition-duration) ease-out;\n    pointer-events: none;\n\n    &.vds-sheet__backdrop--visible {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n\n  .vds-sheet__container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-05);\n    box-sizing: border-box;\n    width: 100%;\n    max-height: 80vh;\n    padding: 0 var(--spacing-05) var(--spacing-05);\n    background-color: var(--vds-sheet-background-color);\n    border-radius: var(--vds-sheet-border-radius) var(--vds-sheet-border-radius) 0 0;\n    box-shadow: var(--vds-sheet-box-shadow);\n    transform: translateY(100%);\n    transition: transform var(--vds-sheet-transition-duration) ease-out;\n\n    &.vds-sheet__container--opened {\n      transform: translateY(0);\n    }\n  }\n\n  .vds-sheet__drag-handle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: var(--spacing-05);\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n\n    .vds-sheet__drag-handle-bar {\n      width: 2rem;\n      height: 0.25rem;\n      background-color: var(--vds-sheet-drag-handle-color);\n      border-radius: var(--radius-medium);\n    }\n  }\n}\n\n:host(.vds-sheet--closed) {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n:host(.vds-sheet--opened) {\n  visibility: visible;\n  pointer-events: auto;\n}\n","import { Component, Host, h, Prop, Method, EventEmitter, Event, Watch, Listen, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-sheet',\n  styleUrl: 'vds-sheet.scss',\n  shadow: true,\n})\nexport class VdsSheet {\n  /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */\n  @Prop() backdrop: boolean = false;\n  /** Open / Close the bottom sheet. */\n  @Prop({ mutable: true }) opened: boolean = false;\n  /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */\n  @Prop() height: string = 'auto';\n  /** Allow drag handle interaction to close the bottom sheet. */\n  @Prop() hideDragHandle: boolean = false;\n\n  /** Emits event when bottom-sheet is opened */\n  @Event() bottomsheetOpened: EventEmitter<void>;\n  /** Emits event when bottom-sheet is closed */\n  @Event() bottomsheetClosed: EventEmitter<void>;\n\n  @Element() el: HTMLElement;\n\n  private dragStartY: number = 0;\n  private isDragging: boolean = false;\n  private dragThreshold: number = 50; // px threshold to close bottom sheet\n\n  @Watch('opened')\n  emitValue(): void {\n    if (this.opened) {\n      this.bottomsheetOpened.emit();\n    } else {\n      this.bottomsheetClosed.emit();\n    }\n  }\n\n  /** Listen for Escape key to close the bottom sheet */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.opened) {\n      this.close();\n    }\n  }\n\n  /**\n   * Trigger open the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is opened\n   */\n  @Method()\n  async open(): Promise<void> {\n    this.opened = true;\n  }\n\n  /**\n   * Trigger closes the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is closed\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.opened = false;\n  }\n\n  /**\n   * Handle drag interactions to close the bottom sheet.\n   */\n  private handleDragStart = (event: TouchEvent | MouseEvent): void => {\n    if (this.hideDragHandle) return;\n\n    this.isDragging = true;\n    this.dragStartY = this.getClientY(event);\n\n    if ('touches' in event) {\n      document.addEventListener('touchmove', this.handleDragMove, { passive: false });\n      document.addEventListener('touchend', this.handleDragEnd);\n    } else {\n      document.addEventListener('mousemove', this.handleDragMove);\n      document.addEventListener('mouseup', this.handleDragEnd);\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragMove = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n\n    // Only allow dragging downward (positive deltaY)\n    if (deltaY > 0) {\n      const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n      if (container) {\n        container.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragEnd = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n    const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n\n    if (container) {\n      container.style.transform = '';\n\n      if (deltaY > this.dragThreshold) {\n        this.close();\n      }\n    }\n\n    document.removeEventListener('touchmove', this.handleDragMove);\n    document.removeEventListener('touchend', this.handleDragEnd);\n    document.removeEventListener('mousemove', this.handleDragMove);\n    document.removeEventListener('mouseup', this.handleDragEnd);\n\n    this.isDragging = false;\n    this.dragStartY = 0;\n  };\n\n  private getClientY(event: TouchEvent | MouseEvent): number {\n    if ('touches' in event) {\n      const touch = event.touches[0] || event.changedTouches[0];\n      return touch.clientY;\n    }\n    return event.clientY;\n  }\n\n  /**\n   * Get the style for the container based on the height prop\n   * If the height is a percentage, it converts it to viewport height.\n   */\n  private getContainerStyle(): { [key: string]: string } {\n    if (this.height === 'auto') {\n      return {};\n    }\n    if (this.height.includes('%')) {\n      const percentValue = parseFloat(this.height);\n      return { height: `${percentValue}vh` };\n    }\n\n    return { height: this.height };\n  }\n\n  private renderBackdrop(): HTMLStencilElement {\n    return <div class={combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : '')} onClick={() => this.close()}></div>;\n  }\n\n  private renderDragHandle(): HTMLStencilElement {\n    if (this.hideDragHandle) return null;\n\n    return (\n      <div class=\"vds-sheet__drag-handle\" onTouchStart={this.handleDragStart} onMouseDown={this.handleDragStart}>\n        <div class=\"vds-sheet__drag-handle-bar\"></div>\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host role=\"dialog\" aria-hidden={!this.opened ? 'true' : 'false'} aria-modal={this.opened ? 'true' : 'false'} class={this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed'}>\n        {this.backdrop && this.renderBackdrop()}\n        <div class={combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : '')} style={this.getContainerStyle()}>\n          {this.renderDragHandle()}\n          <div class=\"vds-sheet__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/vds-sidenav-item-app.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DTZC-zXo.js';
+import { c as combineClasses } from './combine-classes-B23UkaEC.js';
+
+const vdsSidenavItemAppCss = "@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;--vds-sidenav-item-app-expanded-width:var(--vds-sidenav-expanded-width, 17.5rem);--vds-sidenav-item-app-collapsed-width:var(--vds-sidenav-collapse-width, 3.5rem)}:host .vds__sidenav__item__app--container{display:flex;padding:var(--spacing-03);align-items:center;justify-content:center;gap:var(--spacing-04);flex:1 0 0;background-color:transparent;border-radius:var(--radius-medium);border:none;outline:none;width:100%;height:3.5rem}:host .vds__sidenav__item__app--container.collapsed{width:var(--vds-sidenav-item-app-collapsed-width)}:host .vds__sidenav__item__app--container.expanded{justify-content:start;width:var(--vds-sidenav-item-app-expanded-width)}:host .vds__sidenav__item__app--container:hover{border-radius:var(--radius-medium);background:var(--color-interaction-black-lowest)}:host .vds__sidenav__item__app--container:focus-visible{outline:0.125rem solid var(--color-border-focus-2);outline-offset:0.125rem}:host .vds__sidenav__item__app--container:active{border-radius:var(--radius-medium);background:var(--color-interaction-brand-lowest)}:host .vds__sidenav__item__app--container:active span.vds__sidenav__item__app--expanded-value{color:var(--color-link-press)}:host .vds__sidenav__item__app--container.active,:host .vds__sidenav__item__app--container .active:hover{border-radius:var(--radius-medium);background:var(--color-interaction-brand-lowest)}:host .vds__sidenav__item__app--container.active span.vds__sidenav__item__app--expanded-value,:host .vds__sidenav__item__app--container .active:hover span.vds__sidenav__item__app--expanded-value{color:var(--color-link-press)}:host .vds__sidenav__item__app--container span.vds__sidenav__item__app--expanded-value{color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:\"Roboto Flex\", sans-serif;font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:host .vds__sidenav__item__app--container .vds__sidenav__item__app--expanded{display:flex;align-items:center;gap:var(--spacing-04);width:100%;height:100%;justify-content:space-between}:host .vds__sidenav__item__app--container .vds__sidenav__item__app--expanded .vds__sidenav__item__app--icon-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}:host .vds__sidenav__item__app--container .vds__sidenav__item__app--image{max-height:var(--spacing-11);max-width:var(--spacing-11)}";
+
+const VdsSidenavItemApp = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        this.viewMoreClick = createEvent(this, "viewMoreClick");
+        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        this.expanded = true;
+    }
+    getExpandedSidenavItemApp() {
+        return (h("div", { class: "vds__sidenav__item__app--expanded" }, h("span", { class: "vds__sidenav__item__app--expanded-value" }, this.value), this.menuIcon &&
+            h("button", { class: "vds__sidenav__item__app--icon-button", onClick: (evt) => { this.viewMoreClick.emit(evt); } }, h("vds-icon", { color: "color-icon-medium", svgIcon: "more-vertical", size: "1.5rem" }))));
+    }
+    render() {
+        return (h(Host, { key: '6f5077c6bb30df746115871d68aa23ee01337a61' }, h("button", { key: '37473b1486d64405f3df263311719d43a1ba13f5', class: combineClasses("vds__sidenav__item__app--container", `${this.isActive ? "active" : ""}`, `${this.expanded ? "expanded" : "collapsed"}`), onClick: (evt) => { this.clicked.emit(evt); } }, h("div", { key: '2ff8647df9f7556683525dee254d93fc2d283e4a', class: "vds__sidenav__item__app--image" }, h("slot", { key: '6db6bb41fb2314f4494bedeb7bd148d8200a0352', name: "img" })), this.expanded && this.getExpandedSidenavItemApp())));
+    }
+};
+VdsSidenavItemApp.style = vdsSidenavItemAppCss;
+
+export { VdsSidenavItemApp as vds_sidenav_item_app };
+//# sourceMappingURL=vds-sidenav-item-app.entry.js.map
+
+//# sourceMappingURL=vds-sidenav-item-app.entry.js.map

package/dist/esm/vds-sidenav-item-app.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-app.entry.js","sources":["src/components/sidenav-item-app/vds-sidenav-item-app.scss?tag=vds-sidenav-item-app&encapsulation=shadow","src/components/sidenav-item-app/vds-sidenav-item-app.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: block;\n  --vds-sidenav-item-app-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-app-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n\n  .vds__sidenav__item__app--container {\n    display: flex;\n    padding: var(--spacing-03);\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-04);\n    flex: 1 0 0;\n    background-color: transparent;\n    border-radius: var(--radius-medium);\n    border: none;\n    outline: none;\n    width: 100%;\n    height: 3.5rem;\n\n    &.collapsed {\n      width: var(--vds-sidenav-item-app-collapsed-width);\n    }\n\n    &.expanded {\n      justify-content: start;\n      width: var(--vds-sidenav-item-app-expanded-width);\n    }\n\n    &:hover {\n      border-radius: var(--radius-medium);\n      background: var(--color-interaction-black-lowest);\n    }\n\n    &:focus-visible {\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n\n    &:active {\n      border-radius: var(--radius-medium);\n      background: var(--color-interaction-brand-lowest);\n      span.vds__sidenav__item__app--expanded-value {\n        color: var(--color-link-press);\n      }\n    }\n\n    &.active, .active:hover {\n      border-radius: var(--radius-medium);\n      background: var(--color-interaction-brand-lowest);\n      span.vds__sidenav__item__app--expanded-value {\n        color: var(--color-link-press);\n      }\n    }\n\n    span.vds__sidenav__item__app--expanded-value {\n      color: var(--color-text-medium);\n      font-feature-settings: 'clig' off, 'liga' off;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      @include font-style(title, large);\n    }\n\n    .vds__sidenav__item__app--expanded {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-04);\n      width: 100%;\n      height: 100%;\n      justify-content: space-between;\n\n      .vds__sidenav__item__app--icon-button {\n        background: none;\n        color: inherit;\n        border: none;\n        padding: 0;\n        font: inherit;\n        cursor: pointer;\n        outline: inherit;\n      }\n    }\n\n    .vds__sidenav__item__app--image {\n      max-height: var(--spacing-11);\n      max-width: var(--spacing-11);\n    }\n  }\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-sidenav-item-app',\n  styleUrl: 'vds-sidenav-item-app.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemApp {\n  /** Define text value */\n  @Prop() value: string;\n  /** Shows arrow when there are children */\n  @Prop() menuIcon: boolean;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop() expanded: boolean = true;\n  /** Puts the navItem in active state */\n  @Prop() isActive: boolean;\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n  /** Emits event when the user clicks on menu icon*/\n  @Event() viewMoreClick: EventEmitter<MouseEvent>;\n\n\n  private getExpandedSidenavItemApp(): HTMLStencilElement {\n    return (\n      <div class={\"vds__sidenav__item__app--expanded\"}>\n        <span class={\"vds__sidenav__item__app--expanded-value\"}>{this.value}</span>\n        {this.menuIcon && \n          <button class={\"vds__sidenav__item__app--icon-button\"} onClick={(evt) => {this.viewMoreClick.emit(evt)}}>\n            <vds-icon\n              color=\"color-icon-medium\"\n              svgIcon=\"more-vertical\"\n              size=\"1.5rem\">\n            </vds-icon>\n          </button>}\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <button \n          class={combineClasses(\n            \"vds__sidenav__item__app--container\",\n            `${this.isActive ? \"active\" : \"\"}`,\n            `${this.expanded ? \"expanded\" : \"collapsed\"}`\n          )}\n          onClick={(evt) => {this.clicked.emit(evt)}}\n        >\n          <div class={\"vds__sidenav__item__app--image\"}>\n            <slot name=\"img\"></slot>\n          </div>\n          {this.expanded && this.getExpandedSidenavItemApp()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,oBAAoB,GAAG,kliCAAkliC;;MCSlmiC,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AA6CjC;IAnCS,yBAAyB,GAAA;AAC/B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,mCAAmC,EAAA,EAC7C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,yCAAyC,IAAG,IAAI,CAAC,KAAK,CAAQ,EAC1E,IAAI,CAAC,QAAQ;YACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,sCAAsC,EAAE,OAAO,EAAE,CAAC,GAAG,OAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAC,EAAA,EACrG,CAAA,CAAA,UAAA,EAAA,EACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAC,eAAe,EACvB,IAAI,EAAC,QAAQ,EAAA,CACJ,CACJ,CACP;;IAIV,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,oCAAoC,EACpC,CAAG,EAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAClC,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAE,CAAA,CAC9C,EACD,OAAO,EAAE,CAAC,GAAG,KAAM,EAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAC,EAAA,EAE1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAC3C,CACJ;;;;;;;"}

package/dist/esm/vds-sidenav-item-button.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DTZC-zXo.js';
+
+const vdsSidenavItemButtonCss = "@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;--vds-sidenav-item-button-expanded-width:var(--vds-sidenav-expanded-width, 17.5rem);--vds-sidenav-item-button-static-width:var(--vds-sidenav-static-width, 3.75rem);--vds-sidenav-item-button-collapsed-width:var(--vds-sidenav-collapse-width, 3.5rem)}:host .vds__sidenav-item-button{box-sizing:border-box;padding:var(--spacing-00) var(--spacing-03);justify-content:flex-start;align-items:center;border-radius:var(--radius-medium);display:flex;overflow:hidden;font-feature-settings:\"clig\" off, \"liga\" off;text-overflow:ellipsis;line-height:1.25rem;border:var(--spacing-00) solid transparent;cursor:pointer}:host .vds__sidenav-item-button:focus-visible{outline:0.125rem solid var(--color-border-focus-2);outline-offset:0.125rem}:host .vds__sidenav-item-button--variant-primary{background-color:var(--color-background-brand-default);color:var(--static-white)}:host .vds__sidenav-item-button--variant-primary:active,:host .vds__sidenav-item-button--variant-primary:active:hover{background-color:var(--color-background-brand-press);outline:none}:host .vds__sidenav-item-button--variant-primary:hover{background-color:var(--color-background-brand-hover);outline:0.25rem solid var(--color-border-brand-hover);outline-offset:0}:host .vds__sidenav-item-button--variant-primary.vds__sidenav-item-button--static-disabled{box-shadow:0 0 0 0.0625rem inset var(--color-border-disabled)}:host .vds__sidenav-item-button--variant-secondary{color:var(--color-link-default);background-color:transparent;box-shadow:0 0 0 0.125rem inset var(--color-border-brand)}:host .vds__sidenav-item-button--variant-secondary:active,:host .vds__sidenav-item-button--variant-secondary:active:hover{background-color:var(--color-interaction-brand-lower);color:var(--color-link-press)}:host .vds__sidenav-item-button--variant-secondary:active vds-icon,:host .vds__sidenav-item-button--variant-secondary:active:hover vds-icon{color:var(--color-icon-brand-press);fill:var(--color-icon-brand-press)}:host .vds__sidenav-item-button--variant-secondary:hover{background-color:var(--color-interaction-brand-lowest);color:var(--color-link-hover)}:host .vds__sidenav-item-button--variant-secondary:hover vds-icon{color:var(--color-icon-brand-hover);fill:var(--color-icon-brand-hover)}:host .vds__sidenav-item-button--variant-secondary.vds__sidenav-item-button--static{box-shadow:0 0 0 0.125rem inset var(--color-border-brand)}:host .vds__sidenav-item-button--variant-secondary.vds__sidenav-item-button--static.vds__sidenav-item-button--static-disabled{box-shadow:0 0 0 0.125rem inset var(--color-border-disabled)}:host .vds__sidenav-item-button--informative-icon{display:flex;padding:var(--spacing-03, 0.5rem);justify-content:center;align-items:center;gap:var(--spacing-00, 0px)}:host .vds__sidenav-item-button--static{padding:0;letter-spacing:0.009rem;text-align:center;width:var(--vds-sidenav-item-button-static-width);min-height:3.25rem;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:\"Roboto Flex\", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem;box-sizing:border-box}:host .vds__sidenav-item-button--static .vds__sidenav-item-button--informative-icon{padding:var(--spacing-03, 0.5rem) var(--spacing-03, 0.5rem) 0 var(--spacing-03, 0.5rem)}:host .vds__sidenav-item-button--static-label{width:auto;height:auto;max-height:1.5rem;max-width:var(--vds-sidenav-item-button-static-width);text-overflow:ellipsis;overflow:hidden;padding:var(--spacing-02) var(--spacing-00)}:host .vds__sidenav-item-button--expanded{width:var(--vds-sidenav-item-button-expanded-width);height:2.5rem;border-radius:var(--spacing-02)}:host .vds__sidenav-item-button--expanded-label{font-family:\"Roboto Flex\", sans-serif;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal;width:auto;height:auto;max-width:100%;padding:var(--spacing-03, 0.5rem);text-overflow:ellipsis;overflow:hidden;line-height:1.25rem;white-space:nowrap;margin-right:auto}:host .vds__sidenav-item-button--collapsed{width:var(--vds-sidenav-item-button-collapsed-width);height:2.5rem;justify-content:center}:host .vds__sidenav-item-button--label-disabled{color:var(--color-text-disabled);cursor:none}:host .vds__sidenav-item-button--label-active{color:var(--color-link-press)}:host .vds__sidenav-item-button--active{background-color:var(--color-interaction-brand-lowest);color:var(--color-link-press)}:host .vds__sidenav-item-button--expandable-disabled{pointer-events:none;background:var(--global-transparent);color:var(--color-text-disabled)}:host .vds__sidenav-item-button--expandable-primary-disabled{box-shadow:0 0 0 0.0625rem inset var(--color-border-disabled)}:host .vds__sidenav-item-button--expandable-secondary-disabled{box-shadow:0 0 0 0.125rem inset var(--color-border-disabled)}:host .vds__sidenav-item-button--static-disabled{box-shadow:0 0 0 0.125rem inset var(--color-border-disabled);pointer-events:none;background:var(--global-transparent);color:var(--color-text-disabled)}:host-context(.vds__sidenav-item-button--disabled){pointer-events:none}";
+
+const VdsSidenavItemButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        /** Puts the navItem in disabled state */
+        this.disabled = false;
+        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        this.expanded = false;
+        /** Toggles static mode in nav-item */
+        this.isStatic = false;
+        /** Define variant */
+        this.variant = "primary";
+    }
+    handleClick(evt) {
+        this.clicked.emit(evt);
+    }
+    generateInformativeIcon() {
+        const iconColor = this.disabled ? 'color-icon-disabled' : this.variant == 'primary' ? 'white' : 'color-icon-brand-default';
+        return (h("span", { class: "vds__sidenav-item-button--informative-icon" }, h("vds-icon", { "svg-icon": this.icon, size: '1.5rem', color: iconColor, alt: this.value })));
+    }
+    generateLabel() {
+        return (h("span", { class: `
+                    ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static-label' : 'vds__sidenav-item-button--expanded-label'}
+                    ${this.disabled ? 'vds__sidenav-item-button--label-disabled' : ''}
+                    ` }, this.value ? this.value : h("slot", null)));
+    }
+    render() {
+        return (h(Host, { key: '6ff69ae045df14521cd4ebde5a0c96fb3729975e', class: this.disabled ? 'vds__sidenav-item-button--disabled' : '' }, h("button", { key: '27716217c91264c9058aac8504e61ef13c84ab27', "aria-label": this.setAriaLabel ? this.setAriaLabel : this.value, disabled: this.disabled, onClick: (evt) => {
+                if (this.disabled) {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                }
+                else {
+                    this.handleClick(evt);
+                }
+            }, class: `vds__sidenav-item-button
+                 vds__sidenav-item-button--variant-${this.variant} 
+                 ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static' : this.expanded ? 'vds__sidenav-item-button--expanded' : 'vds__sidenav-item-button--collapsed'}
+                 ${this.disabled && this.isStatic ? 'vds__sidenav-item-button--static-disabled' : ''}
+                 ${this.disabled && !this.isStatic ? 'vds__sidenav-item-button--expandable-disabled' : ''}
+                 ${this.disabled && this.variant === 'primary' ? 'vds__sidenav-item-button--expandable-primary-disabled' : ''}
+                 ${this.disabled && this.variant === 'secondary' && !this.isStatic ? 'vds__sidenav-item-button--expandable-secondary-disabled' : ''}
+                 ` }, this.generateInformativeIcon(), this.expanded || this.isStatic ? this.generateLabel() : null)));
+    }
+};
+VdsSidenavItemButton.style = vdsSidenavItemButtonCss;
+
+export { VdsSidenavItemButton as vds_sidenav_item_button };
+//# sourceMappingURL=vds-sidenav-item-button.entry.js.map
+
+//# sourceMappingURL=vds-sidenav-item-button.entry.js.map

package/dist/esm/vds-sidenav-item-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-button.entry.js","sources":["src/components/sidenav-item-button/vds-sidenav-item-button.scss?tag=vds-sidenav-item-button&encapsulation=shadow","src/components/sidenav-item-button/vds-sidenav-item-button.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: block;\n  --vds-sidenav-item-button-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-button-static-width: var(--vds-sidenav-static-width, 3.75rem);\n  --vds-sidenav-item-button-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n  .vds__sidenav-item-button {\n    box-sizing: border-box;\n    padding: var(--spacing-00) var(--spacing-03);\n    justify-content: flex-start;\n    align-items: center;\n    border-radius: var(--radius-medium);\n    display: flex;\n    overflow: hidden;\n    font-feature-settings: 'clig' off, 'liga' off;\n    text-overflow: ellipsis;\n    line-height: 1.25rem;\n    border: var(--spacing-00) solid transparent;\n    cursor: pointer;          \n    &:focus-visible {\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n  }\n  .vds__sidenav-item-button--variant-primary{\n    background-color: var(--color-background-brand-default);\n    color: var(--static-white);\n    &:active, &:active:hover {\n      background-color: var(--color-background-brand-press);\n      outline: none;\n    }\n    &:hover {\n      background-color: var(--color-background-brand-hover);\n      outline: 0.25rem solid var(--color-border-brand-hover);\n      outline-offset: 0;\n    }\n    &.vds__sidenav-item-button--static-disabled{\n      box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n    }\n  }\n  .vds__sidenav-item-button--variant-secondary{    \n    color: var(--color-link-default);\n    background-color: transparent;\n    box-shadow: 0 0 0 0.125rem inset var(--color-border-brand);\n    &:active, &:active:hover {\n      background-color: var(--color-interaction-brand-lower);\n      color: var(--color-link-press);\n      vds-icon {\n        color: var(--color-icon-brand-press);\n        fill: var(--color-icon-brand-press);\n      }\n    }\n    &:hover {\n      background-color: var(--color-interaction-brand-lowest);\n      color: var(--color-link-hover);\n      vds-icon {\n        color: var(--color-icon-brand-hover);\n        fill: var(--color-icon-brand-hover);\n      }\n    }\n    \n    &.vds__sidenav-item-button--static{\n      box-shadow: 0 0 0 0.125rem inset var(--color-border-brand);\n      &.vds__sidenav-item-button--static-disabled{\n        box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n      }\n    }       \n  }\n  .vds__sidenav-item-button--informative-icon{\n    display: flex;\n    padding: var(--spacing-03, 0.5rem);\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-00, 0px);\n  }\n  .vds__sidenav-item-button--static {\n    padding: 0;\n    letter-spacing: 0.009rem;\n    text-align: center;\n    width: var(--vds-sidenav-item-button-static-width);\n    min-height: 3.25rem;\n    display: flex;     \n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    @include font-style(title, 2x-small);\n    box-sizing: border-box;\n    .vds__sidenav-item-button--informative-icon{\n      padding: var(--spacing-03, 0.5rem) var(--spacing-03, 0.5rem) 0 var(--spacing-03, 0.5rem);\n    }\n  }\n  .vds__sidenav-item-button--static-label {\n    width: auto;\n    height: auto;\n    max-height: 1.5rem;\n    max-width: var(--vds-sidenav-item-button-static-width);\n    text-overflow: ellipsis;\n    overflow: hidden;\n    padding: var(--spacing-02) var(--spacing-00);\n  }\n  .vds__sidenav-item-button--expanded {\n    width: var(--vds-sidenav-item-button-expanded-width);\n    height: 2.5rem;\n    border-radius: var(--spacing-02);\n  }  \n  .vds__sidenav-item-button--expanded-label {\n    @include font-style(title, medium);\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    padding: var(--spacing-03, 0.5rem);\n    text-overflow: ellipsis;\n    overflow: hidden;\n    line-height: 1.25rem;\n    white-space: nowrap;\n    margin-right: auto;\n  }\n  .vds__sidenav-item-button--collapsed {\n    width: var(--vds-sidenav-item-button-collapsed-width);\n    height: 2.5rem;\n    justify-content: center;\n  }\n  .vds__sidenav-item-button--label-disabled{\n    color: var(--color-text-disabled);\n    cursor: none;\n  }\n  .vds__sidenav-item-button--label-active {\n    color: var(--color-link-press);\n  }\n  .vds__sidenav-item-button--active {\n    background-color: var(--color-interaction-brand-lowest); \n    color: var(--color-link-press) ; \n  }\n  .vds__sidenav-item-button--expandable-disabled { \n    pointer-events: none;\n    background: var(--global-transparent);\n    color: var(--color-text-disabled);\n  }\n  .vds__sidenav-item-button--expandable-primary-disabled {\n    box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n  }\n  .vds__sidenav-item-button--expandable-secondary-disabled {\n    box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n  }  \n  .vds__sidenav-item-button--static-disabled { \n    box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n    pointer-events: none;\n    background: var(--global-transparent);\n    color: var(--color-text-disabled);\n  } \n}\n\n:host-context(.vds__sidenav-item-button--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-sidenav-item-button',\n  styleUrl: 'vds-sidenav-item-button.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemButton {\n  /** Puts the navItem in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  /** Define the icon value */\n  @Prop({ mutable: true }) icon: string;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Define text value */\n  @Prop({ mutable: true }) value: string;\n  /** Define aria label value */\n  @Prop({ mutable: true }) setAriaLabel: string;\n  /** Define variant */\n  @Prop() variant: \"primary\" | \"secondary\" = \"primary\";\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n\n  private handleClick(evt: MouseEvent): void {\n    this.clicked.emit(evt);\n  }\n  private generateInformativeIcon(){\n    const iconColor = this.disabled ? 'color-icon-disabled' : this.variant=='primary'? 'white': 'color-icon-brand-default';\n    return (\n      <span class=\"vds__sidenav-item-button--informative-icon\">\n        <vds-icon\n          svg-icon={this.icon}\n          size={'1.5rem'}\n          color={iconColor}\n          alt={this.value}\n        />\n      </span>\n    );\n  }\n  private generateLabel(){\n    return (          \n            <span\n              class={`\n                    ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static-label' : 'vds__sidenav-item-button--expanded-label'}\n                    ${this.disabled ? 'vds__sidenav-item-button--label-disabled' : ''}\n                    `}\n            >\n              {this.value ? this.value : <slot></slot>}\n            </span>    \n    );\n  }\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__sidenav-item-button--disabled' : ''}>\n        <button\n          aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n          disabled={this.disabled}\n          onClick={(evt: MouseEvent) => {\n            if (this.disabled) {\n              evt.stopPropagation();\n              evt.preventDefault();\n            } else {\n              this.handleClick(evt);\n            }\n          }}\n          class={`vds__sidenav-item-button\n                 vds__sidenav-item-button--variant-${this.variant} \n                 ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static' : this.expanded ? 'vds__sidenav-item-button--expanded' : 'vds__sidenav-item-button--collapsed'}\n                 ${this.disabled && this.isStatic ? 'vds__sidenav-item-button--static-disabled' : ''}\n                 ${this.disabled && !this.isStatic ? 'vds__sidenav-item-button--expandable-disabled' : ''}\n                 ${this.disabled && this.variant==='primary' ? 'vds__sidenav-item-button--expandable-primary-disabled':'' }\n                 ${this.disabled && this.variant==='secondary' && !this.isStatic ? 'vds__sidenav-item-button--expandable-secondary-disabled':'' }\n                 `}\n        >\n          {this.generateInformativeIcon()}         \n          {this.expanded || this.isStatic ? this.generateLabel() : null }\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/vds-sidenav-item-category.entry.js

@@ -0,0 +1,61 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
+import { g as generateGroupHeaderContainer } from './base-group-header-BuuRc-nw.js';
+import './combine-classes-B23UkaEC.js';
+
+const vdsSidenavItemCategoryCss = "@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}.vds-base-group-header{display:flex;align-items:center}.vds-base-group-header--small{padding:var(--spacing-02);height:0.75rem}.vds-base-group-header--medium{padding:var(--spacing-03);height:1rem}.vds-base-group-header--large{padding:var(--spacing-04);height:1.25rem}.vds-base-group-header__label{color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;font-style:normal;overflow:hidden;text-overflow:ellipsis}.vds-base-group-header__label--small{font-family:\"Roboto Flex\", sans-serif;font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}.vds-base-group-header__label--medium{font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}.vds-base-group-header__label--large{font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:host{display:block;width:fit-content;--vds-sidenav-item-category-expanded-width:var(--vds-sidenav-expanded-width, 17.5rem);--vds-sidenav-item-category-static-width:var(--vds-sidenav-static-width, 3.75rem);--vds-sidenav-item-category-collapsed-width:var(--vds-sidenav-collapse-width, 3.5rem)}:host .vds-sidenav-item-category{padding:var(--spacing-00)}:host .vds-sidenav-item-category__header{display:inline-flex;justify-content:space-between;align-items:center;flex-direction:row;width:var(--vds-sidenav-item-category-expanded-width);gap:var(--spacing-03);padding-bottom:var(--spacing-03)}:host .vds-sidenav-item-category__content{display:flex;flex-direction:column}:host .vds-sidenav-item-category__content ::slotted(*){display:flex;flex-direction:column;row-gap:var(--spacing-03)}:host .vds-sidenav-item-category__action-slot{align-items:center;color:var(--color-text-medium);font-feature-settings:\"clig\" off, \"liga\" off;overflow:hidden;text-overflow:ellipsis}:host .vds-sidenav-item-category__action-slot--medium{padding-right:var(--spacing-03);font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:host .vds-sidenav-item-category__action-slot--large{padding-right:var(--spacing-04);font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:host .vds-sidenav-item-category__divider-container{display:flex;justify-content:center;align-items:center;height:2rem}:host .vds-sidenav-item-category__divider-container--collapsed{width:var(--vds-sidenav-item-category-collapsed-width)}:host .vds-sidenav-item-category__divider-container--static{width:var(--vds-sidenav-item-category-static-width)}:host .vds-sidenav-item-category__divider{height:0.0625rem;opacity:0.08;background-color:var(--color-border-high);display:block}:host .vds-sidenav-item-category__divider--collapsed{width:2.5rem}:host .vds-sidenav-item-category__divider--static{width:2.75rem}";
+
+const VdsSidenavItemCategory = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        this.expanded = false;
+        /** Toggles static mode in nav-item */
+        this.isStatic = false;
+        /** Size of the group header when expanded */
+        this.size = 'medium';
+    }
+    getCollapsedView() {
+        return (h("div", { class: "vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed" }, h("span", { class: "vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed" })));
+    }
+    getStaticView() {
+        return (h("div", { class: "vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static" }, h("span", { class: "vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static" })));
+    }
+    getExpandedView() {
+        return generateGroupHeaderContainer(this.size, this.value);
+    }
+    setView() {
+        return this.expanded
+            ? this.getExpandedView()
+            : this.isStatic
+                ? this.getStaticView()
+                : this.getCollapsedView();
+    }
+    setSlot() {
+        if (this.value && this.expanded && !this.isStatic) {
+            return (h("div", { class: `vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}` }, h("slot", { name: "action-slot" })));
+        }
+    }
+    componentDidRender() {
+        try {
+            const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app'));
+            sidenavItems.forEach((sidenavItem, sidenavItemIndex) => {
+                sidenavItem.setAttribute('vds-sidenavItem-Index', `${sidenavItemIndex}`);
+                sidenavItem.expanded = this.expanded;
+                sidenavItem.isStatic = this.isStatic;
+            });
+        }
+        catch (error) {
+            console.warn('Error updating sidenav items: ', error);
+        }
+    }
+    render() {
+        return (h(Host, { key: '4fbd60f466280a93de1cf659af3ef832f716d538' }, h("div", { key: '0bd28e91b9583798ac0045febbf2f0e1a2e3e513', class: "vds-sidenav-item-category" }, h("div", { key: '5a213c8d5513199f0af8f3aba7ad7955e9ee23f5', class: "vds-sidenav-item-category__header" }, this.setView(), this.setSlot()), h("div", { key: 'd3e34a012d2ef402e967e9dc6242d2caf217b393', class: "vds-sidenav-item-category__content" }, h("slot", { key: '3e6b1345bf437728c9252becf6644e29b20b6b4d', name: "category-items" })))));
+    }
+    get hostEl() { return getElement(this); }
+};
+VdsSidenavItemCategory.style = vdsSidenavItemCategoryCss;
+
+export { VdsSidenavItemCategory as vds_sidenav_item_category };
+//# sourceMappingURL=vds-sidenav-item-category.entry.js.map
+
+//# sourceMappingURL=vds-sidenav-item-category.entry.js.map

package/dist/esm/vds-sidenav-item-category.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-category.entry.js","sources":["src/components/sidenav-item-category/vds-sidenav-item-category.scss?tag=vds-sidenav-item-category&encapsulation=shadow","src/components/sidenav-item-category/vds-sidenav-item-category.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n@import '../base-group-header/base-group-header.scss';\n\n:host {\n  display: block;\n  width: fit-content;\n  --vds-sidenav-item-category-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-category-static-width: var(--vds-sidenav-static-width, 3.75rem);\n  --vds-sidenav-item-category-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n\n  .vds-sidenav-item-category {\n    padding: var(--spacing-00);\n\n    &__header {\n      display: inline-flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-direction: row;\n      width: var(--vds-sidenav-item-category-expanded-width);\n      gap: var(--spacing-03);\n      padding-bottom: var(--spacing-03);\n    }\n\n    &__content {\n      display: flex;\n      flex-direction: column;\n\n      ::slotted(*) {\n        display: flex;\n        flex-direction: column;\n        row-gap: var(--spacing-03);\n      }\n    }\n\n    &__action-slot {\n      align-items: center;\n      color: var(--color-text-medium);\n      font-feature-settings: 'clig' off, 'liga' off;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &--medium {\n        padding-right: var(--spacing-03);\n        @include font-style(title, extra-small);\n      }\n\n      &--large {\n        padding-right: var(--spacing-04);\n        @include font-style(title, small);\n      }\n    }\n\n    &__divider-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 2rem;\n\n      &--collapsed {\n        width: var(--vds-sidenav-item-category-collapsed-width);\n      }\n\n      &--static {\n        width: var(--vds-sidenav-item-category-static-width);\n      }\n    }\n\n    &__divider {\n      height: 0.0625rem;\n      opacity: 0.08;\n      background-color: var(--color-border-high);\n      display: block;\n\n      &--collapsed {\n        width: 2.5rem;\n      }\n\n      &--static {\n        width: 2.75rem;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n  tag: 'vds-sidenav-item-category',\n  styleUrl: 'vds-sidenav-item-category.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemCategory {\n  @Element() hostEl: HTMLElement;\n  /**\n   * Define text value. This component has the possibility of adding an element to the right of this value\n   * using the slot called \"action-slot\". The display condition is when a value is defined in the value property,\n   * the expanded property is equal to true, and the isStatic property is equal to false.\n   */\n  @Prop({ mutable: true }) value: string;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Size of the group header when expanded */\n  @Prop() size: GroupHeaderSize = 'medium';\n\n  private getCollapsedView() {\n    return (\n      <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed\">\n        <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed\"></span>\n      </div>\n    );\n  }\n\n  private getStaticView() {\n    return (\n      <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static\">\n        <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static\"></span>\n      </div>\n    );\n  }\n\n  private getExpandedView() {\n    return generateGroupHeaderContainer(this.size, this.value);\n  }\n\n  private setView() {\n    return this.expanded\n      ? this.getExpandedView()\n      : this.isStatic\n      ? this.getStaticView()\n      : this.getCollapsedView();\n  }\n\n  private setSlot() {\n    if (this.value && this.expanded && !this.isStatic) {\n      return (\n        <div class={`vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}`}>\n          <slot name=\"action-slot\"></slot>\n        </div>\n      );\n    }\n  }\n\n  componentDidRender() {\n    try {\n      const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app')) as any;\n      sidenavItems.forEach((sidenavItem, sidenavItemIndex) => {\n        sidenavItem.setAttribute('vds-sidenavItem-Index', `${sidenavItemIndex}`);\n        sidenavItem.expanded = this.expanded;\n        sidenavItem.isStatic = this.isStatic;\n      });\n    } catch (error) {\n      console.warn('Error updating sidenav items: ', error);\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class=\"vds-sidenav-item-category\">\n          <div class=\"vds-sidenav-item-category__header\">\n            {this.setView()}\n            {this.setSlot()}\n          </div>\n          <div class=\"vds-sidenav-item-category__content\">\n            <slot name=\"category-items\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,yBAAyB,GAAG,+9iCAA+9iC;;MCSp/iC,sBAAsB,GAAA,MAAA;AALnC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAc2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAE1C,QAAA,IAAI,CAAA,IAAA,GAAoB,QAAQ;AAoEzC;IAlES,gBAAgB,GAAA;QACtB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sGAAsG,EAAA,EAC/G,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,kFAAkF,EAAQ,CAAA,CAClG;;IAIF,aAAa,GAAA;QACnB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mGAAmG,EAAA,EAC5G,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+EAA+E,EAAQ,CAAA,CAC/F;;IAIF,eAAe,GAAA;QACrB,OAAO,4BAA4B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;;IAGpD,OAAO,GAAA;QACb,OAAO,IAAI,CAAC;AACV,cAAE,IAAI,CAAC,eAAe;cACpB,IAAI,CAAC;AACP,kBAAE,IAAI,CAAC,aAAa;AACpB,kBAAE,IAAI,CAAC,gBAAgB,EAAE;;IAGrB,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjD,QACE,WAAK,KAAK,EAAE,CAAA,+EAAA,EAAkF,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EACvG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAQ,CAAA,CAC5B;;;IAKZ,kBAAkB,GAAA;AAChB,QAAA,IAAI;AACF,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wCAAwC,CAAC,CAAQ;YAC9G,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,gBAAgB,KAAI;gBACrD,WAAW,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAG,EAAA,gBAAgB,CAAE,CAAA,CAAC;AACxE,gBAAA,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AACpC,gBAAA,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AACtC,aAAC,CAAC;;QACF,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC;;;IAIzD,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mCAAmC,EAAA,EAC3C,IAAI,CAAC,OAAO,EAAE,EACd,IAAI,CAAC,OAAO,EAAE,CACX,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAQ,CAC/B,CACF,CACD;;;;;;;;"}