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

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

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

Files changed (773) hide show

package/dist/components/vds-card2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"vds-card2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/card/vds-card.scss?tag=vds-card&encapsulation=shadow","src/components/card/vds-card.tsx"],"sourcesContent":["@mixin card-variant($variant) {\n $prefix: '--vds-card-#{$variant}-';\n $is-default-or-secondary: $variant == 'default' or $variant == 'secondary';\n\n @if $is-default-or-secondary {\n border: 0.0625rem solid var(#{$prefix}border-color);\n outline: none;\n } @else {\n border: 0.0625rem solid transparent;\n &.vds__card--selectable,\n &.vds__card--button {\n &.vds__card--selected {\n outline: 0.25rem solid var(#{$prefix}selected-border-color);\n }\n &:hover {\n outline: 0.25rem solid var(#{$prefix}border-hover-color);\n }\n &:active:hover {\n outline: none;\n }\n }\n }\n\n background-color: var(#{$prefix}background-color);\n\n &.vds__card--selectable {\n &.vds__card--selected {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}selected-border-color);\n }\n background-color: var(#{$prefix}selected-background-color);\n }\n &:is(:active, :active:hover) {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}selected-border-color);\n }\n background-color: var(#{$prefix}selected-background-color);\n }\n }\n\n &.vds__card--button,\n &.vds__card--selectable {\n cursor: pointer;\n &:hover {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}border-hover-color);\n }\n background-color: var(#{$prefix}background-hover-color);\n }\n &:is(:active, :active:hover) {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}border-press-color);\n }\n background-color: var(#{$prefix}background-press-color);\n }\n }\n}\n\n:host {\n /** Tokens for style override and theming /\n\n /* Default variant /\n --vds-card-default-border-color: var(--color-border-lower);\n --vds-card-default-border-hover-color: var(--color-border-lower);\n --vds-card-default-border-press-color: var(--color-border-lower);\n --vds-card-default-background-color: var(--surface-medium);\n --vds-card-default-background-hover-color: var(--color-interaction-black-lowest);\n --vds-card-default-background-press-color: var(--surface-neutral-press);\n --vds-card-default-selected-border-color: var(--color-border-lower);\n --vds-card-default-selected-background-color: var(--color-interaction-brand-lowest);\n\n /* Primary variant /\n --vds-card-primary-border-hover-color: var(--color-border-brand-hover);\n --vds-card-primary-background-color: var(--color-background-brand-default);\n --vds-card-primary-background-hover-color: var(--color-background-brand-hover);\n --vds-card-primary-background-press-color: var(--color-background-brand-press);\n --vds-card-primary-selected-border-color: var(--color-border-brand-hover);\n --vds-card-primary-selected-background-color: var(--color-background-brand-hover);\n\n /* Secondary variant /\n --vds-card-secondary-border-color: var(--color-border-brand);\n --vds-card-secondary-border-hover-color: var(--color-border-brand);\n --vds-card-secondary-border-press-color: var(--color-border-brand);\n --vds-card-secondary-background-color: var(--surface-medium);\n --vds-card-secondary-background-hover-color: var(--color-interaction-brand-lowest);\n --vds-card-secondary-background-press-color: var(--color-interaction-brand-lower);\n --vds-card-secondary-selected-border-color: var(--color-border-brand);\n --vds-card-secondary-selected-background-color: var(--color-interaction-brand-lowest);\n\n /* Danger variant /\n --vds-card-danger-border-hover-color: var(--color-interaction-danger-medium);\n --vds-card-danger-background-color: var(--color-background-danger-default);\n --vds-card-danger-background-hover-color: var(--color-background-danger-high-hover);\n --vds-card-danger-background-press-color: var(--color-background-danger-high-press);\n --vds-card-danger-selected-border-color: var(--color-interaction-danger-medium);\n --vds-card-danger-selected-background-color: var(--color-background-danger-high-hover);\n\n display: block;\n .vds__card {\n border-radius: var(--radius-medium);\n box-sizing: border-box;\n z-index: var(--elevation-layer-0);\n\n &.vds__card--default {\n @include card-variant('default');\n }\n &.vds__card--primary {\n @include card-variant('primary');\n }\n &.vds__card--secondary {\n @include card-variant('secondary');\n }\n &.vds__card--danger {\n @include card-variant('danger');\n }\n\n &.vds__card--disabled {\n pointer-events: none;\n border: 0.0625rem solid var(--color-border-lower);\n background-color: var(--surface-medium);\n ::slotted() {\n opacity: var(--opacity-32);\n }\n &.vds__card--button,\n &.vds__card--selectable {\n &.vds__card--selected {\n outline: none;\n border-color: var(--color-border-lower);\n background-color: var(--surface-medium);\n }\n }\n &:is(:hover, :active, :active:hover) {\n background-color: var(--surface-medium);\n }\n }\n\n @each $key, $value in $spacing {\n &.padding__spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n @each $key, $value in $shadows {\n &.shadow__elevation-shadow-#{$key} {\n box-shadow: var(--elevation-shadow-#{$key});\n }\n }\n }\n}\n\n:host-context(.vds-card--disabled) {\n pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Watch } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { Spacing } from '../../definitions/spacing';\nimport { ShadowBox } from '../../definitions/shadows';\nimport { combineClasses } from '../../utils/combine-classes';\n@Component({\n tag: 'vds-card',\n styleUrl: 'vds-card.scss',\n shadow: true,\n})\nexport class VdsCard {\n /** Padding of component based on volt-spacing tokens /\n @Prop({ mutable: true }) padding: Spacing = 'spacing-05';\n /* Selectable property allow the card to toggle between selected and unselected state.\n * This property can't be used with the button property at the same time /\n @Prop({ mutable: true }) selectable: boolean = false;\n /* Sets the selected state for the card (only works when selectable property is true).\n * This property can't be used with the button property at the same time /\n @Prop({ mutable: true }) selected: boolean = false;\n /* Button property allows the card to behave like a button.\n * This property can't be used with the selectable property at the same time /\n @Prop({ mutable: true }) button = false;\n /* Sets the card in disabled state /\n @Prop({ mutable: true }) disabled = false;\n /* Allows changing the default card variant /\n @Prop({ mutable: true }) variant: 'primary' \| 'secondary' \| 'danger' \| 'default' = 'default';\n /* Sets the shadow for the card /\n @Prop({ mutable: true }) shadowBox: ShadowBox = 'elevation-shadow-1';\n\n /\n Allows changing the default border color.\n * @deprecated This property is deprecated and will be removed from the code in the future.\n /\n @Prop() borderColor: Colors;\n /\n Allows changing the border color when hovering.\n * @deprecated This property is deprecated and will be removed from the code in the future.\n /\n @Prop() borderHoverColor: Colors;\n\n /* Emits event when card have been selected (only works when selectable property is true) /\n @Event() select: EventEmitter<boolean>;\n /* Emits event when card have been clicked on (only works when button property is true) /\n @Event() click: EventEmitter<MouseEvent>;\n\n @Watch('selected')\n emitSelected(): void {\n if (this.selectable) {\n this.select.emit(this.selected);\n }\n }\n\n @Watch('selectable')\n @Watch('button')\n handleBehaviorValidation(): void {\n if (this.button && this.selectable) {\n this.selectable = false;\n this.selected = false;\n }\n if (!this.selectable && this.selected) {\n this.selected = false;\n }\n }\n\n /\n Sets card's custom border colors\n \n @returns { [key: string]: string }\n */\n private setCustomBorderColors(): { [key: string]: string } {\n const styles = {};\n\n if (this.borderColor) {\n styles['--vds-card-default-border-color'] = `var(--${this.borderColor})`;\n }\n\n if (this.borderHoverColor) {\n styles['--vds-card-default-border-hover-color'] = `var(--${this.borderHoverColor})`;\n }\n\n return styles;\n }\n\n private handleSelectable(): void {\n this.selected = !this.selected;\n }\n\n private handleClick(evt: MouseEvent): void {\n if (this.button) {\n this.click.emit(evt);\n }\n\n if (this.selectable) {\n this.handleSelectable();\n }\n }\n\n componentWillLoad(): void {\n this.handleBehaviorValidation();\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={combineClasses(this.disabled ? \"vds-card--disabled\" : \"\")}>\n <div\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n style={this.setCustomBorderColors()}\n class={`\n vds__card \n vds__card--${this.variant}\n padding__${this.padding}\n shadow__${this.shadowBox}\n ${this.selectable ? 'vds__card--selectable' : ''}\n ${this.selectable && this.selected ? 'vds__card--selected' : ''}\n ${this.button ? 'vds__card--button' : ''}\n ${this.disabled ? 'vds__card--disabled' : ''}\n `}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"vds-card2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,6xyCAA6xyC,CAAC;;MCW3yyC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AAO2B,QAAA,IAAO,CAAA,OAAA,GAAY,YAAY;AACxD;AAC2E;AAClD,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AACpD;AAC2E;AAClD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAClD;AAC+E;AACtD,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAEd,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAEhB,QAAA,IAAO,CAAA,OAAA,GAAmD,SAAS;;AAEnE,QAAA,IAAS,CAAA,SAAA,GAAc,oBAAoB;AAkGrE;IA/EC,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;;IAMnC,wBAAwB,GAAA;QACtB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE;AAClC,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;QAEvB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AACrC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;;AAIzB;;;;AAIG;IACK,qBAAqB,GAAA;QAC3B,MAAM,MAAM,GAAG,EAAE;AAEjB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,CAAC,iCAAiC,CAAC,GAAG,SAAS,IAAI,CAAC,WAAW,CAAA,CAAA,CAAG;;AAG1E,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,MAAM,CAAC,uCAAuC,CAAC,GAAG,SAAS,IAAI,CAAC,gBAAgB,CAAA,CAAA,CAAG;;AAGrF,QAAA,OAAO,MAAM;;IAGP,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;;AAGxB,IAAA,WAAW,CAAC,GAAe,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGtB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE;;;IAI3B,iBAAiB,GAAA;QACf,IAAI,CAAC,wBAAwB,EAAE;;IAGjC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,CAAC,EAAA,EACpE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,CAAC,GAAe,KAAI;AAC3B,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;aACtB,EACD,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,EACnC,KAAK,EAAE;;AAEQ,uBAAA,EAAA,IAAI,CAAC,OAAO;AACd,qBAAA,EAAA,IAAI,CAAC,OAAO;AACb,oBAAA,EAAA,IAAI,CAAC,SAAS;cACtB,IAAI,CAAC,UAAU,GAAG,uBAAuB,GAAG,EAAE;AAC9C,YAAA,EAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE;cAC7D,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE;cACtC,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE;AAC7C,UAAA,CAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/card/vds-card.scss?tag=vds-card&encapsulation=shadow","src/components/card/vds-card.tsx"],"sourcesContent":["@mixin card-variant($variant) {\n $prefix: '--vds-card-#{$variant}-';\n $is-default-or-secondary: $variant == 'default' or $variant == 'secondary';\n\n @if $is-default-or-secondary {\n border: 0.0625rem solid var(#{$prefix}border-color);\n outline: none;\n } @else {\n border: 0.0625rem solid transparent;\n &.vds__card--selectable,\n &.vds__card--button {\n &.vds__card--selected {\n outline: 0.25rem solid var(#{$prefix}selected-border-color);\n }\n &:hover {\n outline: 0.25rem solid var(#{$prefix}border-hover-color);\n }\n &:active:hover {\n outline: none;\n }\n }\n }\n\n background-color: var(#{$prefix}background-color);\n\n &.vds__card--selectable {\n &.vds__card--selected {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}selected-border-color);\n }\n background-color: var(#{$prefix}selected-background-color);\n }\n &:is(:active, :active:hover) {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}selected-border-color);\n }\n background-color: var(#{$prefix}selected-background-color);\n }\n }\n\n &.vds__card--button,\n &.vds__card--selectable {\n cursor: pointer;\n &:hover {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}border-hover-color);\n }\n background-color: var(#{$prefix}background-hover-color);\n }\n &:is(:active, :active:hover) {\n @if $is-default-or-secondary {\n border-color: var(#{$prefix}border-press-color);\n }\n background-color: var(#{$prefix}background-press-color);\n }\n }\n}\n\n:host {\n /** Tokens for style override and theming /\n\n /* Default variant /\n --vds-card-default-border-color: var(--color-border-lower);\n --vds-card-default-border-hover-color: var(--color-border-lower);\n --vds-card-default-border-press-color: var(--color-border-lower);\n --vds-card-default-background-color: var(--surface-medium);\n --vds-card-default-background-hover-color: var(--color-interaction-black-lowest);\n --vds-card-default-background-press-color: var(--surface-neutral-press);\n --vds-card-default-selected-border-color: var(--color-border-lower);\n --vds-card-default-selected-background-color: var(--color-interaction-brand-lowest);\n\n /* Primary variant /\n --vds-card-primary-border-hover-color: var(--color-border-brand-hover);\n --vds-card-primary-background-color: var(--color-background-brand-default);\n --vds-card-primary-background-hover-color: var(--color-background-brand-hover);\n --vds-card-primary-background-press-color: var(--color-background-brand-press);\n --vds-card-primary-selected-border-color: var(--color-border-brand-hover);\n --vds-card-primary-selected-background-color: var(--color-background-brand-hover);\n\n /* Secondary variant /\n --vds-card-secondary-border-color: var(--color-border-brand);\n --vds-card-secondary-border-hover-color: var(--color-border-brand);\n --vds-card-secondary-border-press-color: var(--color-border-brand);\n --vds-card-secondary-background-color: var(--surface-medium);\n --vds-card-secondary-background-hover-color: var(--color-interaction-brand-lowest);\n --vds-card-secondary-background-press-color: var(--color-interaction-brand-lower);\n --vds-card-secondary-selected-border-color: var(--color-border-brand);\n --vds-card-secondary-selected-background-color: var(--color-interaction-brand-lowest);\n\n /* Danger variant /\n --vds-card-danger-border-hover-color: var(--color-interaction-danger-medium);\n --vds-card-danger-background-color: var(--color-background-danger-default);\n --vds-card-danger-background-hover-color: var(--color-background-danger-high-hover);\n --vds-card-danger-background-press-color: var(--color-background-danger-high-press);\n --vds-card-danger-selected-border-color: var(--color-interaction-danger-medium);\n --vds-card-danger-selected-background-color: var(--color-background-danger-high-hover);\n\n display: block;\n .vds__card {\n height: 100%;\n border-radius: var(--radius-medium);\n box-sizing: border-box;\n z-index: var(--elevation-layer-0);\n\n &.vds__card--default {\n @include card-variant('default');\n }\n &.vds__card--primary {\n @include card-variant('primary');\n }\n &.vds__card--secondary {\n @include card-variant('secondary');\n }\n &.vds__card--danger {\n @include card-variant('danger');\n }\n\n &.vds__card--disabled {\n pointer-events: none;\n border: 0.0625rem solid var(--color-border-lower);\n background-color: var(--surface-medium);\n ::slotted() {\n opacity: var(--opacity-32);\n }\n &.vds__card--button,\n &.vds__card--selectable {\n &.vds__card--selected {\n outline: none;\n border-color: var(--color-border-lower);\n background-color: var(--surface-medium);\n }\n }\n &:is(:hover, :active, :active:hover) {\n background-color: var(--surface-medium);\n }\n }\n\n @each $key, $value in $spacing {\n &.padding__spacing-#{$key} {\n padding: var(--spacing-#{$key});\n }\n }\n @each $key, $value in $shadows {\n &.shadow__elevation-shadow-#{$key} {\n box-shadow: var(--elevation-shadow-#{$key});\n }\n }\n }\n}\n\n:host-context(.vds-card--disabled) {\n pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Watch } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { Spacing } from '../../definitions/spacing';\nimport { ShadowBox } from '../../definitions/shadows';\nimport { combineClasses } from '../../utils/combine-classes';\n@Component({\n tag: 'vds-card',\n styleUrl: 'vds-card.scss',\n shadow: true,\n})\nexport class VdsCard {\n /** Padding of component based on volt-spacing tokens /\n @Prop({ mutable: true }) padding: Spacing = 'spacing-05';\n /* Selectable property allow the card to toggle between selected and unselected state.\n * This property can't be used with the button property at the same time /\n @Prop({ mutable: true }) selectable: boolean = false;\n /* Sets the selected state for the card (only works when selectable property is true).\n * This property can't be used with the button property at the same time /\n @Prop({ mutable: true }) selected: boolean = false;\n /* Button property allows the card to behave like a button.\n * This property can't be used with the selectable property at the same time /\n @Prop({ mutable: true }) button = false;\n /* Sets the card in disabled state /\n @Prop({ mutable: true }) disabled = false;\n /* Allows changing the default card variant /\n @Prop({ mutable: true }) variant: 'primary' \| 'secondary' \| 'danger' \| 'default' = 'default';\n /* Sets the shadow for the card /\n @Prop({ mutable: true }) shadowBox: ShadowBox = 'elevation-shadow-1';\n\n /\n Allows changing the default border color.\n * @deprecated This property is deprecated and will be removed from the code in the future.\n /\n @Prop() borderColor: Colors;\n /\n Allows changing the border color when hovering.\n * @deprecated This property is deprecated and will be removed from the code in the future.\n /\n @Prop() borderHoverColor: Colors;\n\n /* Emits event when card have been selected (only works when selectable property is true) /\n @Event() select: EventEmitter<boolean>;\n /* Emits event when card have been clicked on (only works when button property is true) /\n @Event() click: EventEmitter<MouseEvent>;\n\n @Watch('selected')\n emitSelected(): void {\n if (this.selectable) {\n this.select.emit(this.selected);\n }\n }\n\n @Watch('selectable')\n @Watch('button')\n handleBehaviorValidation(): void {\n if (this.button && this.selectable) {\n this.selectable = false;\n this.selected = false;\n }\n if (!this.selectable && this.selected) {\n this.selected = false;\n }\n }\n\n /\n Sets card's custom border colors\n \n @returns { [key: string]: string }\n */\n private setCustomBorderColors(): { [key: string]: string } {\n const styles = {};\n\n if (this.borderColor) {\n styles['--vds-card-default-border-color'] = `var(--${this.borderColor})`;\n }\n\n if (this.borderHoverColor) {\n styles['--vds-card-default-border-hover-color'] = `var(--${this.borderHoverColor})`;\n }\n\n return styles;\n }\n\n private handleSelectable(): void {\n this.selected = !this.selected;\n }\n\n private handleClick(evt: MouseEvent): void {\n if (this.button) {\n this.click.emit(evt);\n }\n\n if (this.selectable) {\n this.handleSelectable();\n }\n }\n\n componentWillLoad(): void {\n this.handleBehaviorValidation();\n }\n\n render(): HTMLStencilElement {\n return (\n <Host class={combineClasses(this.disabled ? \"vds-card--disabled\" : \"\")}>\n <div\n onClick={(evt: MouseEvent) => {\n this.handleClick(evt);\n }}\n style={this.setCustomBorderColors()}\n class={`\n vds__card \n vds__card--${this.variant}\n padding__${this.padding}\n shadow__${this.shadowBox}\n ${this.selectable ? 'vds__card--selectable' : ''}\n ${this.selectable && this.selected ? 'vds__card--selected' : ''}\n ${this.button ? 'vds__card--button' : ''}\n ${this.disabled ? 'vds__card--disabled' : ''}\n `}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/vds-checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } from '@stencil/core/internal/client';
 import { c as combineClasses } from './combine-classes.js';
 import { d as defineCustomElement$3 } from './vds-icon2.js';
 import { d as defineCustomElement$2 } from './vds-label2.js';
@@ -36,12 +36,14 @@ class CheckboxEvent extends Boolean {
     }
 }
-const vdsCheckboxCss = "@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:inline-block}:host input{outline:none;border:0;appearance:none;margin:0;padding:0}:host label{cursor:pointer}:host .vds__checkbox__container{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:content-box;border:0.125rem solid transparent;appearance:none}:host .vds__checkbox__container .checkbox-label::part(label){cursor:pointer}:host .vds__checkbox__container .vds__checkbox{display:flex}:host .vds__checkbox__container:focus-within{outline:none;border-radius:0.25rem;border:0.125rem solid var(--color-border-focus-2)}:host .vds__checkbox__container.vds__checkbox__container--size-medium{gap:0.5rem;padding:calc(var(--spacing-03) - 0.125rem)}:host .vds__checkbox__container.vds__checkbox__container--size-medium vds-icon{width:var(--spacing-06);height:var(--spacing-06)}:host .vds__checkbox__container.vds__checkbox__container--size-large{gap:0.75rem;padding:calc(var(--spacing-04) - 0.125rem)}:host .vds__checkbox__container.vds__checkbox__container--size-large vds-icon{width:var(--spacing-07);height:var(--spacing-07)}:host .vds__checkbox__container .checkbox-icon::part(svg-icon){color:var(--color-icon-medium);fill:var(--color-icon-medium)}:host .vds__checkbox__container:hover .checkbox-icon::part(svg-icon){color:var(--color-icon-high);fill:var(--color-icon-high)}:host .vds__checkbox__container.vds__checkbox--checked .checkbox-icon::part(svg-icon){transform:scale(1.25);color:var(--color-background-brand-default);fill:var(--color-background-brand-default)}:host .vds__checkbox__container.vds__checkbox--checked:hover .checkbox-icon::part(svg-icon){color:var(--color-background-brand-hover);fill:var(--color-background-brand-hover)}:host .vds__checkbox__container.vds__checkbox--indeterminate .checkbox-icon::part(svg-icon){transform:scale(1.25);color:var(--color-icon-medium);fill:var(--color-icon-medium)}:host .vds__checkbox__container.vds__checkbox--error .checkbox-icon::part(svg-icon){color:var(--color-background-danger-default);fill:var(--color-background-danger-default)}:host .vds__checkbox__container.vds__checkbox--error:hover .checkbox-icon::part(svg-icon){color:var(--color-background-danger-high-hover);fill:var(--color-background-danger-high-hover)}:host .vds__checkbox__container.vds__checkbox--disabled{pointer-events:none}:host .vds__checkbox__container.vds__checkbox--disabled .checkbox-icon::part(svg-icon){color:var(--color-icon-disabled);fill:var(--color-icon-disabled)}";
+const vdsCheckboxCss = () => `:root{font-family:"Roboto Flex", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}@font-face{font-family:"Roboto Flex";src:url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");font-weight:100 1000;font-stretch:25% 151%;font-style:normal}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-white-medium:rgba(255, 255, 255, 0.6392156863);--static-white-low:rgba(255, 255, 255, 0.3215686275);--static-white-lower:rgba(255, 255, 255, 0.1607843137);--static-white-lowest:rgba(255, 255, 255, 0.1215686275);--static-black:#000000;--static-black-medium:rgba(0, 0, 0, 0.6392156863);--static-black-low:rgba(0, 0, 0, 0.3215686275);--static-black-lower:rgba(0, 0, 0, 0.1607843137);--static-black-lowest:rgba(0, 0, 0, 0.1215686275);--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:inline-block}:host input{outline:none;border:0;appearance:none;margin:0;padding:0}:host label{cursor:pointer}:host .vds__checkbox__container{display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:content-box;border:0.125rem solid transparent;appearance:none}:host .vds__checkbox__container .checkbox-label::part(label){cursor:pointer}:host .vds__checkbox__container .vds__checkbox{display:flex}:host .vds__checkbox__container:focus-within{outline:none;border-radius:0.25rem;border:0.125rem solid var(--color-border-focus-2)}:host .vds__checkbox__container.vds__checkbox__container--size-medium{gap:0.5rem;padding:calc(var(--spacing-03) - 0.125rem)}:host .vds__checkbox__container.vds__checkbox__container--size-medium vds-icon{width:var(--spacing-06);height:var(--spacing-06)}:host .vds__checkbox__container.vds__checkbox__container--size-large{gap:0.75rem;padding:calc(var(--spacing-04) - 0.125rem)}:host .vds__checkbox__container.vds__checkbox__container--size-large vds-icon{width:var(--spacing-07);height:var(--spacing-07)}:host .vds__checkbox__container .checkbox-icon::part(svg-icon){color:var(--color-icon-medium);fill:var(--color-icon-medium)}:host .vds__checkbox__container:hover .checkbox-icon::part(svg-icon){color:var(--color-icon-high);fill:var(--color-icon-high)}:host .vds__checkbox__container.vds__checkbox--checked .checkbox-icon::part(svg-icon){transform:scale(1.25);color:var(--color-background-brand-default);fill:var(--color-background-brand-default)}:host .vds__checkbox__container.vds__checkbox--checked:hover .checkbox-icon::part(svg-icon){color:var(--color-background-brand-hover);fill:var(--color-background-brand-hover)}:host .vds__checkbox__container.vds__checkbox--indeterminate .checkbox-icon::part(svg-icon){transform:scale(1.25);color:var(--color-icon-medium);fill:var(--color-icon-medium)}:host .vds__checkbox__container.vds__checkbox--error .checkbox-icon::part(svg-icon){color:var(--color-background-danger-default);fill:var(--color-background-danger-default)}:host .vds__checkbox__container.vds__checkbox--error:hover .checkbox-icon::part(svg-icon){color:var(--color-background-danger-high-hover);fill:var(--color-background-danger-high-hover)}:host .vds__checkbox__container.vds__checkbox--disabled{pointer-events:none}:host .vds__checkbox__container.vds__checkbox--disabled .checkbox-icon::part(svg-icon){color:var(--color-icon-disabled);fill:var(--color-icon-disabled)}`;
 const VdsBasicCheckbox = /*@__PURE__*/ proxyCustomElement(class VdsBasicCheckbox extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.checkboxChange = createEvent(this, "checkboxChange", 7);
         this.check = createEvent(this, "check", 7);
@@ -149,15 +151,15 @@ const VdsBasicCheckbox = /*@__PURE__*/ proxyCustomElement(class VdsBasicCheckbox
     }
     render() {
         var _a;
-        return (h(Host, { key: '158a1cbb863a187b74fb8204a3442c4b09a9f47d', state: this.state }, h("div", { key: '05070e9ca5dcb87e504788916612836172a23f44', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: 'f795947b47273c5d8c36df25930d244094f42760', class: "vds__checkbox" }, h("input", { key: 'fba6450c787d038173300e57fe38b06690f0974e', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: 'b9cb49f14833104b646f379f2724a4df07a576e7', state: this.state }, h("div", { key: '5b4dc6536b46a28648955985debd88e806272b02', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: 'e4ddf360caaa127f801fd54110e54694d2c48ac7', class: "vds__checkbox" }, h("input", { key: 'd6f26b4bd829916b6f69de8428d99545a5a1288a', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
     }
     static get formAssociated() { return true; }
     get hostEl() { return this; }
     static get watchers() { return {
         "checked": ["setCheckedStates"]
     }; }
-    static get style() { return vdsCheckboxCss; }
-}, [65, "vds-checkbox", {
+    static get style() { return vdsCheckboxCss(); }
+}, [321, "vds-checkbox", {
         "labelValue": [1537, "label-value"],
         "checked": [1540],
         "indeterminate": [1540],
@@ -177,17 +179,17 @@ function defineCustomElement$1() {
     const components = ["vds-checkbox", "vds-icon", "vds-label"];
     components.forEach(tagName => { switch (tagName) {
         case "vds-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VdsBasicCheckbox);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), VdsBasicCheckbox);
             }
             break;
         case "vds-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "vds-label":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/vds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"vds-checkbox.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/checkbox/vds-checkbox.utils.ts","src/components/checkbox/vds-checkbox.scss?tag=vds-checkbox&encapsulation=shadow","src/components/checkbox/vds-checkbox.tsx"],"sourcesContent":["/*\n Custom checkbox change event to capture\n * extra keys being pressed when user clicks on the checkbox\n /\nexport class CheckboxEvent extends Boolean {\n\tconstructor(\n\t\tprivate _value = false,\n\t\tprivate _altKey = false,\n\t\tprivate _ctrlKey = false,\n\t\tprivate _metaKey = false,\n\t\tprivate _shiftKey = false\n\t) {\n\t\tsuper(_value);\n\t}\n\n\tvalueOf(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tisChecked(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tget altKey(): boolean {\n\t\treturn this._altKey;\n\t}\n\n\tget ctrlKey(): boolean {\n\t\treturn this._ctrlKey;\n\t}\n\n\tget metaKey(): boolean {\n\t\treturn this._metaKey;\n\t}\n\n\tget shiftKey(): boolean {\n\t\treturn this._shiftKey;\n\t}\n}\n\n",":host {\n display: inline-block;\n input {\n outline: none;\n border: 0;\n appearance: none;\n margin: 0;\n padding: 0;\n }\n label {\n cursor: pointer;\n }\n .vds__checkbox__container {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-sizing: content-box;\n border: 0.125rem solid transparent;\n appearance: none;\n\n .checkbox-label::part(label) {\n cursor: pointer;\n }\n\n .vds__checkbox {\n display: flex;\n }\n \n &:focus-within {\n outline: none;\n border-radius: 0.25rem;\n border: 0.125rem solid var(--color-border-focus-2);\n }\n\n &.vds__checkbox__container--size-medium {\n gap: 0.5rem;\n padding: calc(var(--spacing-03) - 0.125rem);\n vds-icon {\n width: var(--spacing-06);\n height: var(--spacing-06);\n }\n }\n &.vds__checkbox__container--size-large {\n gap: 0.75rem;\n padding: calc(var(--spacing-04) - 0.125rem);\n vds-icon {\n width: var(--spacing-07);\n height: var(--spacing-07);\n }\n }\n\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-medium);\n fill: var(--color-icon-medium);\n }\n\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-high);\n fill: var(--color-icon-high);\n }\n }\n \n &.vds__checkbox--checked {\n .checkbox-icon::part(svg-icon) {\n transform: scale(1.25);\n color: var(--color-background-brand-default);\n fill: var(--color-background-brand-default);\n }\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-brand-hover);\n fill: var(--color-background-brand-hover);\n }\n }\n }\n\n &.vds__checkbox--indeterminate {\n .checkbox-icon::part(svg-icon) {\n transform: scale(1.25);\n color: var(--color-icon-medium);\n fill: var(--color-icon-medium);\n }\n }\n \n &.vds__checkbox--error {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-danger-default);\n fill: var(--color-background-danger-default);\n }\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-danger-high-hover);\n fill: var(--color-background-danger-high-hover);\n }\n }\n }\n\n &.vds__checkbox--disabled {\n pointer-events: none;\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-disabled);\n fill: var(--color-icon-disabled);\n }\n }\n }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Method, Event, EventEmitter, Element, AttachInternals, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { CheckboxEvent } from \"./vds-checkbox.utils\";\n@Component({\n tag: \"vds-checkbox\",\n styleUrl: \"vds-checkbox.scss\",\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicCheckbox {\n /* Sets the text to be shown in the checkbox /\n @Prop({ reflect: true, mutable: true }) labelValue: string;\n /* Sets the checkbox in checked state /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /* Sets the checkbodx in indeterminate state /\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /* Sets the checkbox in disabled state /\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n /* Sets the checkbox in error state /\n @Prop({ reflect: true, mutable: true }) error: boolean = false;\n /* Sets the checkbox's size /\n @Prop({ mutable: true }) size: \"medium\" \| \"large\" = \"medium\";\n /* Toggles the required sign in the field /\n @Prop({ mutable: true }) isRequired: boolean = false;\n /* Sets the value in the input. Usually uses checked prop as string. \n * Used to manage Reactive forms and other native functionality /\n @Prop({ reflect: true, mutable: true }) value: string;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /\n Event which is triggered when checkbox state changes. This event also captures if\n * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\n * changed. Use CheckboxEvent.isChecked() or\n * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n \t\tif(event.detail == true) {\n \t\t\tconsole.log('Checked');\n * \t\t}\n * console.log(event.detail.altKey);\n * console.log(event.detail.shiftKey);\n * console.log(event.detail.ctrlKey);\n * })\n \n /\n @Event() checkboxChange: EventEmitter<CheckboxEvent>;\n /** Makes a custom change to target property using checked and indeterminate (use for React components) /\n @Event() check: EventEmitter<boolean>;\n\n private state: \"checked\" \| \"unchecked\" \| \"indeterminate\" = \"unchecked\";\n\n componentWillRender(): void {\n this.setCheckboxState();\n }\n\n componentDidLoad(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /\n Executes every time checked value changes.\n * Sets indeterminate value to false in order to guarantee a change in value.\n * Sets form value in order to work properly with native forms\n \n @returns void\n /\n @Watch(\"checked\")\n setCheckedStates(): void {\n this.indeterminate = false;\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /\n Executes every time the checkbox is being click.\n * Executes toggleCheck method.\n \n @param event - MouseEvent\n * @returns void\n /\n\thandleClick(event: MouseEvent): void {\n\t\tthis.toggleCheck(event);\n\t}\n\n /\n Toggles checkbox value.\n * Emits checkboxChange event with CheckboxEvent value.\n * Emits check event with checked value.\n \n @param evt - KeyboardEvent \| MouseEvent\n * @returns Promise<void>\n /\n @Method()\n toggleCheck(evt?: KeyboardEvent \| MouseEvent): Promise<void> {\n if (!this.disabled) {\n const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n this.value = this.checked.toString();\n\t\t\tthis.indeterminate = false;\n\t\t\tthis.checkboxChange.emit(\n\t\t\t\tnew CheckboxEvent(\n\t\t\t\t\tthis.checked,\n\t\t\t\t\tevt?.altKey,\n\t\t\t\t\tevt?.ctrlKey,\n\t\t\t\t\tevt?.metaKey,\n\t\t\t\t\tevt?.shiftKey\n\t\t\t\t)\n\t\t\t);\n\t\t\tthis.check.emit(this.checked);\n this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n return Promise.resolve();\n }\n\n /\n Determine state of the checkbox based on the indeterminate and checked properties.\n * When indetermanate is true, state is indeterminate.\n * When indetermanate is false and checked is true, state is checked.\n * When indetermanate is false and checked is false, state is unchecked.\n \n @returns void\n /\n private setCheckboxState(): void {\n this.state = this.indeterminate ? \"indeterminate\" : this.checked ? \"checked\" : \"unchecked\";\n }\n\n /\n Returns the icon prop based on the state and calculate the size.\n \n @returns HTMLStencilElement\n /\n private renderCheckbox(): HTMLStencilElement {\n const size = this.size === \"large\" ? \"1.5rem\" : \"1.25rem\";\n const disabledClass = this.disabled ? \"checkbox-icon-disabled\" : \"\";\n switch(this.state) {\n case \"checked\":\n return <vds-icon class={`checkbox-icon checkbox-icon-checked ${disabledClass}`} svgIcon={`checked`} size={size}></vds-icon>;\n case \"indeterminate\":\n return <vds-icon class={`checkbox-icon checkbox-icon-indeterminate ${disabledClass}`} svgIcon={`indeterminate`} size={size}></vds-icon>\n default:\n return <vds-icon class={`checkbox-icon ${disabledClass}`} svgIcon={`unchecked`} size={size}></vds-icon>;; \n }\n }\n\n /\n Returns the vds-label for the checkbox when there is a label provided.\n \n @returns HTMLStencilElement\n */\n private renderLabel(): HTMLStencilElement {\n return <vds-label class={\"checkbox-label\"} labelValue={this.labelValue} required={this.isRequired} size={this.size} disabled={this.disabled}></vds-label>\n }\n\n render(): HTMLStencilElement {\n return (\n <Host state={this.state}>\n <div\n onClick={(evt): void => {this.handleClick(evt)}}\n class={combineClasses(\n \"vds__checkbox__container\",\n `vds__checkbox__container--size-${this.size}`,\n this.checked && !this.indeterminate ? \"vds__checkbox--checked\" : \"\",\n this.indeterminate ? \"vds__checkbox--indeterminate\" : \"\",\n this.disabled ? \"vds__checkbox--disabled\" : \"\",\n this.error ? \"vds__checkbox--error\" : \"\",\n )}\n >\n <div class=\"vds__checkbox\">\n <input\n type={\"checkbox\"}\n checked={this.checked}\n value={this.value}\n id={this.hostEl?.id}\n disabled={this.disabled} />\n {this.renderCheckbox()}\n </div>\n {this.labelValue && this.renderLabel()}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"vds-checkbox.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/checkbox/vds-checkbox.utils.ts","src/components/checkbox/vds-checkbox.scss?tag=vds-checkbox&encapsulation=shadow","src/components/checkbox/vds-checkbox.tsx"],"sourcesContent":["/*\n Custom checkbox change event to capture\n * extra keys being pressed when user clicks on the checkbox\n /\nexport class CheckboxEvent extends Boolean {\n\tconstructor(\n\t\tprivate _value = false,\n\t\tprivate _altKey = false,\n\t\tprivate _ctrlKey = false,\n\t\tprivate _metaKey = false,\n\t\tprivate _shiftKey = false\n\t) {\n\t\tsuper(_value);\n\t}\n\n\tvalueOf(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tisChecked(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tget altKey(): boolean {\n\t\treturn this._altKey;\n\t}\n\n\tget ctrlKey(): boolean {\n\t\treturn this._ctrlKey;\n\t}\n\n\tget metaKey(): boolean {\n\t\treturn this._metaKey;\n\t}\n\n\tget shiftKey(): boolean {\n\t\treturn this._shiftKey;\n\t}\n}\n\n",":host {\n display: inline-block;\n input {\n outline: none;\n border: 0;\n appearance: none;\n margin: 0;\n padding: 0;\n }\n label {\n cursor: pointer;\n }\n .vds__checkbox__container {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-sizing: content-box;\n border: 0.125rem solid transparent;\n appearance: none;\n\n .checkbox-label::part(label) {\n cursor: pointer;\n }\n\n .vds__checkbox {\n display: flex;\n }\n \n &:focus-within {\n outline: none;\n border-radius: 0.25rem;\n border: 0.125rem solid var(--color-border-focus-2);\n }\n\n &.vds__checkbox__container--size-medium {\n gap: 0.5rem;\n padding: calc(var(--spacing-03) - 0.125rem);\n vds-icon {\n width: var(--spacing-06);\n height: var(--spacing-06);\n }\n }\n &.vds__checkbox__container--size-large {\n gap: 0.75rem;\n padding: calc(var(--spacing-04) - 0.125rem);\n vds-icon {\n width: var(--spacing-07);\n height: var(--spacing-07);\n }\n }\n\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-medium);\n fill: var(--color-icon-medium);\n }\n\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-high);\n fill: var(--color-icon-high);\n }\n }\n \n &.vds__checkbox--checked {\n .checkbox-icon::part(svg-icon) {\n transform: scale(1.25);\n color: var(--color-background-brand-default);\n fill: var(--color-background-brand-default);\n }\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-brand-hover);\n fill: var(--color-background-brand-hover);\n }\n }\n }\n\n &.vds__checkbox--indeterminate {\n .checkbox-icon::part(svg-icon) {\n transform: scale(1.25);\n color: var(--color-icon-medium);\n fill: var(--color-icon-medium);\n }\n }\n \n &.vds__checkbox--error {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-danger-default);\n fill: var(--color-background-danger-default);\n }\n &:hover {\n .checkbox-icon::part(svg-icon) {\n color: var(--color-background-danger-high-hover);\n fill: var(--color-background-danger-high-hover);\n }\n }\n }\n\n &.vds__checkbox--disabled {\n pointer-events: none;\n .checkbox-icon::part(svg-icon) {\n color: var(--color-icon-disabled);\n fill: var(--color-icon-disabled);\n }\n }\n }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Method, Event, EventEmitter, Element, AttachInternals, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { CheckboxEvent } from \"./vds-checkbox.utils\";\n\n@Component({\n tag: \"vds-checkbox\",\n styleUrl: \"vds-checkbox.scss\",\n shadow: true,\n formAssociated: true\n})\nexport class VdsBasicCheckbox {\n /* Sets the text to be shown in the checkbox /\n @Prop({ reflect: true, mutable: true }) labelValue: string;\n /* Sets the checkbox in checked state /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /* Sets the checkbodx in indeterminate state /\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /* Sets the checkbox in disabled state /\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n /* Sets the checkbox in error state /\n @Prop({ reflect: true, mutable: true }) error: boolean = false;\n /* Sets the checkbox's size /\n @Prop({ mutable: true }) size: \"medium\" \| \"large\" = \"medium\";\n /* Toggles the required sign in the field /\n @Prop({ mutable: true }) isRequired: boolean = false;\n /* Sets the value in the input. Usually uses checked prop as string. \n * Used to manage Reactive forms and other native functionality /\n @Prop({ reflect: true, mutable: true }) value: string;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /\n Event which is triggered when checkbox state changes. This event also captures if\n * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\n * changed. Use CheckboxEvent.isChecked() or\n * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n \t\tif(event.detail == true) {\n \t\t\tconsole.log('Checked');\n * \t\t}\n * console.log(event.detail.altKey);\n * console.log(event.detail.shiftKey);\n * console.log(event.detail.ctrlKey);\n * })\n \n /\n @Event() checkboxChange: EventEmitter<CheckboxEvent>;\n /** Makes a custom change to target property using checked and indeterminate (use for React components) /\n @Event() check: EventEmitter<boolean>;\n\n private state: \"checked\" \| \"unchecked\" \| \"indeterminate\" = \"unchecked\";\n\n componentWillRender(): void {\n this.setCheckboxState();\n }\n\n componentDidLoad(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /\n Executes every time checked value changes.\n * Sets indeterminate value to false in order to guarantee a change in value.\n * Sets form value in order to work properly with native forms\n \n @returns void\n /\n @Watch(\"checked\")\n setCheckedStates(): void {\n this.indeterminate = false;\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /\n Executes every time the checkbox is being click.\n * Executes toggleCheck method.\n \n @param event - MouseEvent\n * @returns void\n /\n\thandleClick(event: MouseEvent): void {\n\t\tthis.toggleCheck(event);\n\t}\n\n /\n Toggles checkbox value.\n * Emits checkboxChange event with CheckboxEvent value.\n * Emits check event with checked value.\n \n @param evt - KeyboardEvent \| MouseEvent\n * @returns Promise<void>\n /\n @Method()\n toggleCheck(evt?: KeyboardEvent \| MouseEvent): Promise<void> {\n if (!this.disabled) {\n const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n this.value = this.checked.toString();\n\t\t\tthis.indeterminate = false;\n\t\t\tthis.checkboxChange.emit(\n\t\t\t\tnew CheckboxEvent(\n\t\t\t\t\tthis.checked,\n\t\t\t\t\tevt?.altKey,\n\t\t\t\t\tevt?.ctrlKey,\n\t\t\t\t\tevt?.metaKey,\n\t\t\t\t\tevt?.shiftKey\n\t\t\t\t)\n\t\t\t);\n\t\t\tthis.check.emit(this.checked);\n this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n return Promise.resolve();\n }\n\n /\n Determine state of the checkbox based on the indeterminate and checked properties.\n * When indetermanate is true, state is indeterminate.\n * When indetermanate is false and checked is true, state is checked.\n * When indetermanate is false and checked is false, state is unchecked.\n \n @returns void\n /\n private setCheckboxState(): void {\n this.state = this.indeterminate ? \"indeterminate\" : this.checked ? \"checked\" : \"unchecked\";\n }\n\n /\n Returns the icon prop based on the state and calculate the size.\n \n @returns HTMLStencilElement\n /\n private renderCheckbox(): HTMLStencilElement {\n const size = this.size === \"large\" ? \"1.5rem\" : \"1.25rem\";\n const disabledClass = this.disabled ? \"checkbox-icon-disabled\" : \"\";\n switch(this.state) {\n case \"checked\":\n return <vds-icon class={`checkbox-icon checkbox-icon-checked ${disabledClass}`} svgIcon={`checked`} size={size}></vds-icon>;\n case \"indeterminate\":\n return <vds-icon class={`checkbox-icon checkbox-icon-indeterminate ${disabledClass}`} svgIcon={`indeterminate`} size={size}></vds-icon>\n default:\n return <vds-icon class={`checkbox-icon ${disabledClass}`} svgIcon={`unchecked`} size={size}></vds-icon>;; \n }\n }\n\n /\n Returns the vds-label for the checkbox when there is a label provided.\n \n @returns HTMLStencilElement\n */\n private renderLabel(): HTMLStencilElement {\n return <vds-label class={\"checkbox-label\"} labelValue={this.labelValue} required={this.isRequired} size={this.size} disabled={this.disabled}></vds-label>\n }\n\n render(): HTMLStencilElement {\n return (\n <Host state={this.state}>\n <div\n onClick={(evt): void => {this.handleClick(evt)}}\n class={combineClasses(\n \"vds__checkbox__container\",\n `vds__checkbox__container--size-${this.size}`,\n this.checked && !this.indeterminate ? \"vds__checkbox--checked\" : \"\",\n this.indeterminate ? \"vds__checkbox--indeterminate\" : \"\",\n this.disabled ? \"vds__checkbox--disabled\" : \"\",\n this.error ? \"vds__checkbox--error\" : \"\",\n )}\n >\n <div class=\"vds__checkbox\">\n <input\n type={\"checkbox\"}\n checked={this.checked}\n value={this.value}\n id={this.hostEl?.id}\n disabled={this.disabled} />\n {this.renderCheckbox()}\n </div>\n {this.labelValue && this.renderLabel()}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}