@sebgroup/green-core 1.73.0 → 1.74.1

package/components/sensitive/number/sensitive-number.component.js

@@ -0,0 +1,43 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import { GdsBlur } from "../../blur/blur.component.js";
+import { numberFormats } from "../../formatted-text/index.js";
+import { GdsFormattedNumber } from "../../formatted-text/number/formatted-number.component.js";
+let GdsSensitiveNumber = class extends GdsFormattedNumber {
+  constructor() {
+    super(...arguments);
+    this.hide = false;
+  }
+  get formattedValue() {
+    if (this.hide) {
+      return numberFormats[this.format](0, this.locale, this.currency);
+    }
+    return super.formattedValue;
+  }
+  render() {
+    return when(
+      this.hide,
+      () => html`<gds-blur>${super.render()}</gds-blur>`,
+      () => super.render()
+    );
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.element) {
+      this.element.ariaLabel = super.formattedValue;
+    }
+  }
+};
+__decorateClass([
+  property({ type: Boolean })
+], GdsSensitiveNumber.prototype, "hide", 2);
+GdsSensitiveNumber = __decorateClass([
+  gdsCustomElement("gds-sensitive-number", { dependsOn: [GdsBlur] })
+], GdsSensitiveNumber);
+export {
+  GdsSensitiveNumber
+};

package/components/sensitive/number/sensitive-number.d.ts

@@ -0,0 +1,2 @@
+import { GdsSensitiveNumber } from './sensitive-number.component';
+export { GdsSensitiveNumber };

package/components/sensitive/number/sensitive-number.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { GdsSensitiveNumber } from "./sensitive-number.component.js";
+GdsSensitiveNumber.define();
+export {
+  GdsSensitiveNumber
+};

package/components/theme/chlorophyll-tokens.scss.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 14:35:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 14:35:08 GMT\n */\n:host {\n  display: contents;\n  --gds-sys-shape-corner-none: 0;\n  --gds-sys-shape-corner-small: 0.125rem;\n  --gds-sys-shape-corner-medium: 0.25rem;\n  --gds-sys-shape-corner-round: 50%;\n  --gds-comp-checkbox-container-height: 1rem;\n  --gds-comp-checkbox-container-width: 1rem;\n  --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n  --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base300);\n  --gds-comp-checkbox-border-color: var(--gds-sys-color-base900);\n  --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n  --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);\n  --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);\n  --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n  --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n  --gds-ref-color-white: #ffffff;\n  --gds-ref-color-black: #000000;\n  --gds-ref-pallet-base000: hsl(0 0% 100%);\n  --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n  --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n  --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n  --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n  --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n  --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n  --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n  --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n  --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n  --gds-ref-pallet-base1000: hsl(0 0% 0%);\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-blue-dark-1: #0092e1;\n  --gds-sys-color-blue-dark-2: #007ac7;\n  --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n  --gds-sys-color-base: var(--gds-ref-pallet-base800);\n  --gds-sys-color-font: var(--gds-ref-pallet-base800);\n  --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n  --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #41b0ee;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2c99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base-100: #f8f8f8;\n  --gds-sys-color-base-200: #e9e9e9;\n  --gds-sys-color-base-300: #dedede;\n  --gds-sys-color-base-400: #cecece;\n  --gds-sys-color-base-500: #adadad;\n  --gds-sys-color-base-600: #868686;\n  --gds-sys-color-base-700: #494949;\n  --gds-sys-color-base-800: #333333;\n  --gds-sys-color-base-900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n  --heading-primary-color: rgb(0, 0, 0);\n  --text-primary-color: rgb(51, 51, 51);\n  --text-secondary-color: rgb(134, 134, 134);\n  --text-disabled-color: var(--gds-ref-pallet-base600);\n  --text-primary-disabled-color: var(--gds-ref-pallet-base600);\n  --border-color: rgba(0, 0, 0, 0.17);\n  --border-secondary-color: rgba(0, 0, 0, 0.1);\n  --border-disabled-color: var(--gds-ref-pallet-base500);\n  --border-primary-disabled-color: var(--gds-ref-pallet-base500);\n  --border-color-invalid: rgb(159, 0, 10);\n  --border-color-valid: rgb(55, 157, 0);\n  --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n  --form-control-primary-bg-disabled: var(--gds-ref-pallet-base200);\n  --link-color-dark: rgb(51, 51, 51);\n  --link-color-dark-visited: rgb(73, 73, 73);\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-primary-background: rgb(0, 122, 199);\n  --intent-primary-color: #fff;\n  --intent-primary-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-secondary-background: rgb(222, 222, 222);\n  --intent-secondary-color: black;\n  --intent-secondary-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-info-background: rgb(0, 122, 199);\n  --intent-info-color: #fff;\n  --intent-info-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n  --intent-success-color: #fff;\n  --intent-success-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-warning-background: rgb(255, 197, 0);\n  --intent-warning-color: black;\n  --intent-warning-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-danger-background: rgb(159, 0, 10);\n  --intent-danger-color: #fff;\n  --intent-danger-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-light-background: rgb(238, 238, 238);\n  --intent-light-color: black;\n  --intent-light-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-dark-background: rgb(51, 51, 51);\n  --intent-dark-color: #fff;\n  --intent-dark-fadable-color: 255, 255, 255;\n  --grey-1100: rgb(26, 26, 26);\n  --grey-1000: rgb(51, 51, 51);\n  --grey-900: rgb(73, 73, 73);\n  --grey-800: rgb(134, 134, 134);\n  --grey-700: rgb(173, 173, 173);\n  --grey-600: rgb(206, 206, 206);\n  --grey-500: rgb(222, 222, 222);\n  --grey-400: rgb(233, 233, 233);\n  --grey-300: rgb(238, 238, 238);\n  --grey-200: rgb(248, 248, 248);\n  --grey-100: rgb(255, 255, 255);\n  color: var(--text-primary-color);\n  --gds-sys-outline-color: #333333;\n  --gds-comp-chips-fr-color: #333333;\n  --gds-comp-chips-bg-color: #ffffff;\n  --gds-comp-chips-br-color: #333333;\n  --gds-comp-chips-fr-color-hover: #ffffff;\n  --gds-comp-chips-bg-color-hover: #494949;\n  --gds-comp-chips-br-color-hover: #494949;\n  --gds-comp-chips-bg-color-active: #333333;\n  --gds-comp-chips-bg-color-action: #333333;\n  /* generate css variables */\n  --sg-z-index-datepicker: 995;\n  --sg-z-index-dropdown-backdrop: 990;\n  --sg-z-index-dropdown: 2000;\n  --sg-z-index-sticky: 1020;\n  --sg-z-index-fixed: 1030;\n  --sg-z-index-modal-backdrop: 1040;\n  --sg-z-index-modal: 1050;\n  --sg-z-index-popover: 1060;\n  --sg-z-index-tooltip: 1070;\n  --sg-text-primary: #333333;\n  --sg-text-secondary: #333333;\n  --sg-form-control-bg: #fff;\n  --sg-form-control-bg-disabled: #eeeeee;\n  --sg-border-color: var(--gds-ref-pallet-base600);\n  --sg-border-width: 1px;\n  --sg-border-width-50: 0.5px;\n  --sg-border-radius: 0.25rem;\n  --sg-hsl-contrast: 0deg, 0%, 0%;\n  --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n  --sg-hsl-light-contrast: 0deg, 0%, 0%;\n  --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n  --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n  --sg-hsl-black: 0deg, 0%, 0%;\n  --sg-hsl-white: 0deg, 0%, 100%;\n  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n  --sg-grey-100: #f8f8f8;\n  --sg-grey-200: #e9e9e9;\n  --sg-grey-300: #dedede;\n  --sg-grey-400: #cecece;\n  --sg-grey-500: #adadad;\n  --sg-grey-600: #868686;\n  --sg-grey-700: #494949;\n  --sg-grey-800: #333333;\n  --sg-grey-900: #1a1a1a;\n  --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n  --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n  --sg-bg-level-0: #eeeeee;\n  --sg-bg-level-1: #fff;\n  --sg-bg-level-2: #fff;\n  --sg-bg-level-3: #fff;\n  --sg-table-header-background: #1a1a1a;\n  --sg-table-header-color: #fff;\n  --sg-table-cell-padding-x: 0.5rem;\n  --sg-table-cell-padding-y: 0.6875rem;\n  --sg-table-border-width: 1px;\n  --sg-table-border-color: var(--gds-ref-pallet-base600);\n  --sg-table-sort-icon-color: var(--gds-ref-pallet-base600);\n  --sg-table-sort-icon-color-active: #fff;\n  --sg-skeleton-loader-highlight-color: #dedede;\n  --sg-skeleton-loader-background-color: #f8f8f8;\n  --sg-modal-background: #fff;\n  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-popover-background: #fff;\n  --sg-popover-border-color: #007ac7;\n  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-card-background: #fff;\n  --sg-card-heading-color: #333333;\n  --sg-card-color: #333333;\n  --sg-card-border: solid 1px #fff;\n  --sg-card-border-radius: 4px;\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #0092e1;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2C99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base100: #f8f8f8;\n  --gds-sys-color-base200: #e9e9e9;\n  --gds-sys-color-base300: #dedede;\n  --gds-sys-color-base400: #cecece;\n  --gds-sys-color-base500: #adadad;\n  --gds-sys-color-base600: #868686;\n  --gds-sys-color-base700: #494949;\n  --gds-sys-color-base800: #333333;\n  --gds-sys-color-base900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n  --heading-primary-color: rgb(255, 255, 255);\n  --text-primary-color: rgba(255, 255, 255, 0.9);\n  --text-secondary-color: rgba(255, 255, 255, 0.6);\n  --text-disabled-color: rgba(255, 255, 255, 0.07);\n  --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n  --border-color: rgb(51, 51, 51);\n  --border-secondary-color: rgb(51, 51, 51);\n  --border-disabled-color: rgb(44, 44, 44);\n  --border-primary-disabled-color: rgb(44, 44, 44);\n  --border-color-invalid: rgb(255, 89, 79);\n  --border-color-valid: rgb(48, 136, 0);\n  --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n  --link-color-dark: rgb(179, 179, 179);\n  --link-color-dark-visited: rgb(171, 171, 171);\n  --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-primary-background: rgb(44, 156, 217);\n  --intent-primary-color: #000;\n  --intent-primary-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-secondary-background: rgb(51, 51, 51);\n  --intent-secondary-color: #fff;\n  --intent-secondary-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-info-background: rgb(44, 156, 217);\n  --intent-info-color: #000;\n  --intent-info-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-success-background: rgb(48, 136, 0);\n  --intent-success-color: #000;\n  --intent-success-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-warning-background: rgb(255, 225, 130);\n  --intent-warning-color: #000;\n  --intent-warning-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-danger-background: rgb(255, 89, 79);\n  --intent-danger-color: #000;\n  --intent-danger-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-light-background: rgb(39, 39, 39);\n  --intent-light-color: #fff;\n  --intent-light-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-dark-background: rgb(171, 171, 171);\n  --intent-dark-color: #000;\n  --intent-dark-fadable-color: 0, 0, 0;\n  --grey-100: rgb(18, 18, 18);\n  --grey-200: rgb(34, 34, 34);\n  --grey-300: rgb(39, 39, 39);\n  --grey-400: rgb(44, 44, 44);\n  --grey-500: rgb(51, 51, 51);\n  --grey-600: rgb(60, 60, 60);\n  --grey-700: rgb(67, 67, 67);\n  --grey-800: rgb(73, 73, 73);\n  --grey-900: rgb(117, 117, 117);\n  --grey-1000: rgb(171, 171, 171);\n  --grey-1100: rgb(179, 179, 179);\n  color: var(--text-primary-color);\n  --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n  --gds-comp-chips-fr-color: #dedede;\n  --gds-comp-chips-bg-color: #2c2c2c;\n  --gds-comp-chips-br-color: #2c2c2c;\n  --gds-comp-chips-fr-color-hover: #dedede;\n  --gds-comp-chips-bg-color-hover: #2c2c2c;\n  --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n  --gds-comp-chips-bg-color-active: #222222;\n  --gds-comp-chips-bg-color-action: #2c2c2c;\n  --gds-sys-color-focus-outline: white;\n  --gds-sys-color-font: var(--gds-ref-pallet-base300);\n  /* generate css variables */\n  --sg-z-index-datepicker: 995;\n  --sg-z-index-dropdown-backdrop: 990;\n  --sg-z-index-dropdown: 2000;\n  --sg-z-index-sticky: 1020;\n  --sg-z-index-fixed: 1030;\n  --sg-z-index-modal-backdrop: 1040;\n  --sg-z-index-modal: 1050;\n  --sg-z-index-popover: 1060;\n  --sg-z-index-tooltip: 1070;\n  --sg-text-primary: #dedede;\n  --sg-text-secondary: #ababab;\n  --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n  --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n  --sg-border-color: #ababab;\n  --sg-border-width: 1px;\n  --sg-border-width-50: 0.5px;\n  --sg-border-radius: 0.25rem;\n  --sg-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n  --sg-hsl-light-contrast: 0deg, 0%, 0%;\n  --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n  --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n  --sg-hsl-black: 0deg, 0%, 0%;\n  --sg-hsl-white: 0deg, 0%, 100%;\n  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n  --sg-grey-100: #dedede;\n  --sg-grey-200: #ababab;\n  --sg-grey-300: #757575;\n  --sg-grey-400: #494949;\n  --sg-grey-500: #333333;\n  --sg-grey-600: #2c2c2c;\n  --sg-grey-700: #272727;\n  --sg-grey-800: #222222;\n  --sg-grey-900: #121212;\n  --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-disabled-background: 0deg, 0%, 20%;\n  --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n  --sg-bg-level-0: #121212;\n  --sg-bg-level-1: #222222;\n  --sg-bg-level-2: #272727;\n  --sg-bg-level-3: #2c2c2c;\n  --sg-table-header-background: #121212;\n  --sg-table-header-color: #fff;\n  --sg-table-cell-padding-x: 0.5rem;\n  --sg-table-cell-padding-y: 0.6875rem;\n  --sg-table-border-width: 1px;\n  --sg-table-border-color: #ababab;\n  --sg-table-sort-icon-color: #ababab;\n  --sg-table-sort-icon-color-active: #fff;\n  --sg-skeleton-loader-highlight-color: #494949;\n  --sg-skeleton-loader-background-color: #2c2c2c;\n  --sg-modal-background: #272727;\n  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-popover-background: #222222;\n  --sg-popover-border-color: #007ac7;\n  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-card-background: #222222;\n  --sg-card-heading-color: #dedede;\n  --sg-card-color: #dedede;\n  --sg-card-border: solid 1px #222222;\n  --sg-card-border-radius: 4px;\n  --gds-sys-color-blue: #58b8ee;\n  --gds-sys-color-dark-blue-1: #00adff;\n  --gds-sys-color-dark-blue-2: #2c9cd9;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #75b44a;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffe182;\n  --gds-sys-color-dark-yellow-1: #f0be47;\n  --gds-sys-color-dark-yellow-2: #ebab39;\n  --gds-sys-color-text-primary: #dedede;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #333333;\n  --gds-sys-color-text-link: #2c9cd9;\n  --gds-sys-color-text-error: #ff594f;\n  --gds-sys-color-text-disabled: #464646;\n  --gds-sys-color-red: #f7706d;\n  --gds-sys-color-dark-red-1: #c82a29;\n  --gds-sys-color-dark-red-2: #9e2120;\n  --gds-sys-color-purple: #ad91dc;\n  --gds-sys-color-dark-purple-1: #7e52cc;\n  --gds-sys-color-dark-purple-2: #4a328f;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #222222;\n  --gds-sys-color-background-secondary: #1a1a1a;\n  --gds-sys-color-base100: #121212;\n  --gds-sys-color-base200: #222222;\n  --gds-sys-color-base300: #272727;\n  --gds-sys-color-base400: #2c2c2c;\n  --gds-sys-color-base500: #333333;\n  --gds-sys-color-base600: #494949;\n  --gds-sys-color-base700: #757575;\n  --gds-sys-color-base800: #ababab;\n  --gds-sys-color-base900: #dedede;\n  --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n  --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n  :host,\n  :host([color-scheme=auto]) {\n    --heading-primary-color: rgb(255, 255, 255);\n    --text-primary-color: rgba(255, 255, 255, 0.9);\n    --text-secondary-color: rgba(255, 255, 255, 0.6);\n    --text-disabled-color: rgba(255, 255, 255, 0.07);\n    --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n    --border-color: rgb(51, 51, 51);\n    --border-secondary-color: rgb(51, 51, 51);\n    --border-disabled-color: rgb(44, 44, 44);\n    --border-primary-disabled-color: rgb(44, 44, 44);\n    --border-color-invalid: rgb(255, 89, 79);\n    --border-color-valid: rgb(48, 136, 0);\n    --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n    --link-color-dark: rgb(179, 179, 179);\n    --link-color-dark-visited: rgb(171, 171, 171);\n    --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-primary-background: rgb(44, 156, 217);\n    --intent-primary-color: #000;\n    --intent-primary-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-secondary-background: rgb(51, 51, 51);\n    --intent-secondary-color: #fff;\n    --intent-secondary-fadable-color: 255, 255, 255;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-info-background: rgb(44, 156, 217);\n    --intent-info-color: #000;\n    --intent-info-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-success-background: rgb(48, 136, 0);\n    --intent-success-color: #000;\n    --intent-success-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-warning-background: rgb(255, 225, 130);\n    --intent-warning-color: #000;\n    --intent-warning-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-danger-background: rgb(255, 89, 79);\n    --intent-danger-color: #000;\n    --intent-danger-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-light-background: rgb(39, 39, 39);\n    --intent-light-color: #fff;\n    --intent-light-fadable-color: 255, 255, 255;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-dark-background: rgb(171, 171, 171);\n    --intent-dark-color: #000;\n    --intent-dark-fadable-color: 0, 0, 0;\n    --grey-100: rgb(18, 18, 18);\n    --grey-200: rgb(34, 34, 34);\n    --grey-300: rgb(39, 39, 39);\n    --grey-400: rgb(44, 44, 44);\n    --grey-500: rgb(51, 51, 51);\n    --grey-600: rgb(60, 60, 60);\n    --grey-700: rgb(67, 67, 67);\n    --grey-800: rgb(73, 73, 73);\n    --grey-900: rgb(117, 117, 117);\n    --grey-1000: rgb(171, 171, 171);\n    --grey-1100: rgb(179, 179, 179);\n    color: var(--text-primary-color);\n    --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n    --gds-comp-chips-fr-color: #dedede;\n    --gds-comp-chips-bg-color: #2c2c2c;\n    --gds-comp-chips-br-color: #2c2c2c;\n    --gds-comp-chips-fr-color-hover: #dedede;\n    --gds-comp-chips-bg-color-hover: #2c2c2c;\n    --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n    --gds-comp-chips-bg-color-active: #222222;\n    --gds-comp-chips-bg-color-action: #2c2c2c;\n    --gds-sys-color-focus-outline: white;\n    --gds-sys-color-font: var(--gds-ref-pallet-base300);\n    /* generate css variables */\n    --sg-z-index-datepicker: 995;\n    --sg-z-index-dropdown-backdrop: 990;\n    --sg-z-index-dropdown: 2000;\n    --sg-z-index-sticky: 1020;\n    --sg-z-index-fixed: 1030;\n    --sg-z-index-modal-backdrop: 1040;\n    --sg-z-index-modal: 1050;\n    --sg-z-index-popover: 1060;\n    --sg-z-index-tooltip: 1070;\n    --sg-text-primary: #dedede;\n    --sg-text-secondary: #ababab;\n    --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n    --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n    --sg-border-color: #ababab;\n    --sg-border-width: 1px;\n    --sg-border-width-50: 0.5px;\n    --sg-border-radius: 0.25rem;\n    --sg-hsl-contrast: 0deg, 0%, 100%;\n    --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n    --sg-hsl-light-contrast: 0deg, 0%, 0%;\n    --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n    --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n    --sg-hsl-black: 0deg, 0%, 0%;\n    --sg-hsl-white: 0deg, 0%, 100%;\n    --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n    --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n    --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n    --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n    --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n    --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n    --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n    --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n    --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n    --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n    --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n    --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n    --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n    --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n    --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n    --sg-grey-100: #dedede;\n    --sg-grey-200: #ababab;\n    --sg-grey-300: #757575;\n    --sg-grey-400: #494949;\n    --sg-grey-500: #333333;\n    --sg-grey-600: #2c2c2c;\n    --sg-grey-700: #272727;\n    --sg-grey-800: #222222;\n    --sg-grey-900: #121212;\n    --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n    --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n    --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n    --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n    --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n    --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n    --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n    --sg-hsl-disabled-background: 0deg, 0%, 20%;\n    --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n    --sg-bg-level-0: #121212;\n    --sg-bg-level-1: #222222;\n    --sg-bg-level-2: #272727;\n    --sg-bg-level-3: #2c2c2c;\n    --sg-table-header-background: #121212;\n    --sg-table-header-color: #fff;\n    --sg-table-cell-padding-x: 0.5rem;\n    --sg-table-cell-padding-y: 0.6875rem;\n    --sg-table-border-width: 1px;\n    --sg-table-border-color: #ababab;\n    --sg-table-sort-icon-color: #ababab;\n    --sg-table-sort-icon-color-active: #fff;\n    --sg-skeleton-loader-highlight-color: #494949;\n    --sg-skeleton-loader-background-color: #2c2c2c;\n    --sg-modal-background: #272727;\n    --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n    --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-popover-background: #222222;\n    --sg-popover-border-color: #007ac7;\n    --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-card-background: #222222;\n    --sg-card-heading-color: #dedede;\n    --sg-card-color: #dedede;\n    --sg-card-border: solid 1px #222222;\n    --sg-card-border-radius: 4px;\n  }\n}";
+const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 10 Apr 2025 12:32:33 GMT\n */\n:host {\n  display: contents;\n  --gds-sys-shape-corner-none: 0;\n  --gds-sys-shape-corner-small: 0.125rem;\n  --gds-sys-shape-corner-medium: 0.25rem;\n  --gds-sys-shape-corner-round: 50%;\n  --gds-comp-checkbox-container-height: 1rem;\n  --gds-comp-checkbox-container-width: 1rem;\n  --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n  --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base300);\n  --gds-comp-checkbox-border-color: var(--gds-sys-color-base900);\n  --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n  --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);\n  --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);\n  --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n  --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n  --gds-ref-color-white: #ffffff;\n  --gds-ref-color-black: #000000;\n  --gds-ref-pallet-base000: hsl(0 0% 100%);\n  --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n  --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n  --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n  --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n  --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n  --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n  --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n  --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n  --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n  --gds-ref-pallet-base1000: hsl(0 0% 0%);\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-blue-dark-1: #0092e1;\n  --gds-sys-color-blue-dark-2: #007ac7;\n  --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n  --gds-sys-color-base: var(--gds-ref-pallet-base800);\n  --gds-sys-color-font: var(--gds-ref-pallet-base800);\n  --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n  --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #41b0ee;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2c99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base-100: #f8f8f8;\n  --gds-sys-color-base-200: #e9e9e9;\n  --gds-sys-color-base-300: #dedede;\n  --gds-sys-color-base-400: #cecece;\n  --gds-sys-color-base-500: #adadad;\n  --gds-sys-color-base-600: #868686;\n  --gds-sys-color-base-700: #494949;\n  --gds-sys-color-base-800: #333333;\n  --gds-sys-color-base-900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n  --heading-primary-color: rgb(0, 0, 0);\n  --text-primary-color: rgb(51, 51, 51);\n  --text-secondary-color: rgb(134, 134, 134);\n  --text-disabled-color: var(--gds-ref-pallet-base600);\n  --text-primary-disabled-color: var(--gds-ref-pallet-base600);\n  --border-color: rgba(0, 0, 0, 0.17);\n  --border-secondary-color: rgba(0, 0, 0, 0.1);\n  --border-disabled-color: var(--gds-ref-pallet-base500);\n  --border-primary-disabled-color: var(--gds-ref-pallet-base500);\n  --border-color-invalid: rgb(159, 0, 10);\n  --border-color-valid: rgb(55, 157, 0);\n  --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n  --form-control-primary-bg-disabled: var(--gds-ref-pallet-base200);\n  --link-color-dark: rgb(51, 51, 51);\n  --link-color-dark-visited: rgb(73, 73, 73);\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-primary-background: rgb(0, 122, 199);\n  --intent-primary-color: #fff;\n  --intent-primary-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-secondary-background: rgb(222, 222, 222);\n  --intent-secondary-color: black;\n  --intent-secondary-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-info-background: rgb(0, 122, 199);\n  --intent-info-color: #fff;\n  --intent-info-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n  --intent-success-color: #fff;\n  --intent-success-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-warning-background: rgb(255, 197, 0);\n  --intent-warning-color: black;\n  --intent-warning-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-danger-background: rgb(159, 0, 10);\n  --intent-danger-color: #fff;\n  --intent-danger-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-light-background: rgb(238, 238, 238);\n  --intent-light-color: black;\n  --intent-light-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-dark-background: rgb(51, 51, 51);\n  --intent-dark-color: #fff;\n  --intent-dark-fadable-color: 255, 255, 255;\n  --grey-1100: rgb(26, 26, 26);\n  --grey-1000: rgb(51, 51, 51);\n  --grey-900: rgb(73, 73, 73);\n  --grey-800: rgb(134, 134, 134);\n  --grey-700: rgb(173, 173, 173);\n  --grey-600: rgb(206, 206, 206);\n  --grey-500: rgb(222, 222, 222);\n  --grey-400: rgb(233, 233, 233);\n  --grey-300: rgb(238, 238, 238);\n  --grey-200: rgb(248, 248, 248);\n  --grey-100: rgb(255, 255, 255);\n  color: var(--text-primary-color);\n  --gds-sys-outline-color: #333333;\n  --gds-comp-chips-fr-color: #333333;\n  --gds-comp-chips-bg-color: #ffffff;\n  --gds-comp-chips-br-color: #333333;\n  --gds-comp-chips-fr-color-hover: #ffffff;\n  --gds-comp-chips-bg-color-hover: #494949;\n  --gds-comp-chips-br-color-hover: #494949;\n  --gds-comp-chips-bg-color-active: #333333;\n  --gds-comp-chips-bg-color-action: #333333;\n  /* generate css variables */\n  --sg-z-index-datepicker: 995;\n  --sg-z-index-dropdown-backdrop: 990;\n  --sg-z-index-dropdown: 2000;\n  --sg-z-index-sticky: 1020;\n  --sg-z-index-fixed: 1030;\n  --sg-z-index-modal-backdrop: 1040;\n  --sg-z-index-modal: 1050;\n  --sg-z-index-popover: 1060;\n  --sg-z-index-tooltip: 1070;\n  --sg-text-primary: #333333;\n  --sg-text-secondary: #333333;\n  --sg-form-control-bg: #fff;\n  --sg-form-control-bg-disabled: #eeeeee;\n  --sg-border-color: var(--gds-ref-pallet-base600);\n  --sg-border-width: 1px;\n  --sg-border-width-50: 0.5px;\n  --sg-border-radius: 0.25rem;\n  --sg-hsl-contrast: 0deg, 0%, 0%;\n  --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n  --sg-hsl-light-contrast: 0deg, 0%, 0%;\n  --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n  --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n  --sg-hsl-black: 0deg, 0%, 0%;\n  --sg-hsl-white: 0deg, 0%, 100%;\n  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n  --sg-grey-100: #f8f8f8;\n  --sg-grey-200: #e9e9e9;\n  --sg-grey-300: #dedede;\n  --sg-grey-400: #cecece;\n  --sg-grey-500: #adadad;\n  --sg-grey-600: #868686;\n  --sg-grey-700: #494949;\n  --sg-grey-800: #333333;\n  --sg-grey-900: #1a1a1a;\n  --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n  --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n  --sg-bg-level-0: #eeeeee;\n  --sg-bg-level-1: #fff;\n  --sg-bg-level-2: #fff;\n  --sg-bg-level-3: #fff;\n  --sg-table-header-background: #1a1a1a;\n  --sg-table-header-color: #fff;\n  --sg-table-cell-padding-x: 0.5rem;\n  --sg-table-cell-padding-y: 0.6875rem;\n  --sg-table-border-width: 1px;\n  --sg-table-border-color: var(--gds-ref-pallet-base600);\n  --sg-table-sort-icon-color: var(--gds-ref-pallet-base600);\n  --sg-table-sort-icon-color-active: #fff;\n  --sg-skeleton-loader-highlight-color: #dedede;\n  --sg-skeleton-loader-background-color: #f8f8f8;\n  --sg-modal-background: #fff;\n  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-popover-background: #fff;\n  --sg-popover-border-color: #007ac7;\n  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-card-background: #fff;\n  --sg-card-heading-color: #333333;\n  --sg-card-color: #333333;\n  --sg-card-border: solid 1px #fff;\n  --sg-card-border-radius: 4px;\n  --gds-sys-color-blue: #41b0ee;\n  --gds-sys-color-dark-blue-1: #0092e1;\n  --gds-sys-color-dark-blue-2: #007ac7;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #45b400;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffc500;\n  --gds-sys-color-dark-yellow-1: #ffb400;\n  --gds-sys-color-dark-yellow-2: #f8a000;\n  --gds-sys-color-text-primary: #333333;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #ffffff;\n  --gds-sys-color-text-link: #0062bc;\n  --gds-sys-color-text-error: #9f000a;\n  --gds-sys-color-text-disabled: #adadad;\n  --gds-sys-color-red: #f03529;\n  --gds-sys-color-dark-red-1: #d81a1a;\n  --gds-sys-color-dark-red-2: #bb000c;\n  --gds-sys-color-purple: #673ab6;\n  --gds-sys-color-dark-purple-1: #4f2C99;\n  --gds-sys-color-dark-purple-2: #3f2587;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #ffffff;\n  --gds-sys-color-background-secondary: #eeeeee;\n  --gds-sys-color-base100: #f8f8f8;\n  --gds-sys-color-base200: #e9e9e9;\n  --gds-sys-color-base300: #dedede;\n  --gds-sys-color-base400: #cecece;\n  --gds-sys-color-base500: #adadad;\n  --gds-sys-color-base600: #868686;\n  --gds-sys-color-base700: #494949;\n  --gds-sys-color-base800: #333333;\n  --gds-sys-color-base900: #1a1a1a;\n  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n  --heading-primary-color: rgb(255, 255, 255);\n  --text-primary-color: rgba(255, 255, 255, 0.9);\n  --text-secondary-color: rgba(255, 255, 255, 0.6);\n  --text-disabled-color: rgba(255, 255, 255, 0.07);\n  --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n  --border-color: rgb(51, 51, 51);\n  --border-secondary-color: rgb(51, 51, 51);\n  --border-disabled-color: rgb(44, 44, 44);\n  --border-primary-disabled-color: rgb(44, 44, 44);\n  --border-color-invalid: rgb(255, 89, 79);\n  --border-color-valid: rgb(48, 136, 0);\n  --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n  --link-color-dark: rgb(179, 179, 179);\n  --link-color-dark-visited: rgb(171, 171, 171);\n  --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-primary-background: rgb(44, 156, 217);\n  --intent-primary-color: #000;\n  --intent-primary-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-secondary-background: rgb(51, 51, 51);\n  --intent-secondary-color: #fff;\n  --intent-secondary-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-info-background: rgb(44, 156, 217);\n  --intent-info-color: #000;\n  --intent-info-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-success-background: rgb(48, 136, 0);\n  --intent-success-color: #000;\n  --intent-success-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-warning-background: rgb(255, 225, 130);\n  --intent-warning-color: #000;\n  --intent-warning-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-danger-background: rgb(255, 89, 79);\n  --intent-danger-color: #000;\n  --intent-danger-fadable-color: 0, 0, 0;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-light-background: rgb(39, 39, 39);\n  --intent-light-color: #fff;\n  --intent-light-fadable-color: 255, 255, 255;\n  /* try and adjust colors to get desired color combination,\n  in this case adjust background to go with white foreground */\n  --intent-dark-background: rgb(171, 171, 171);\n  --intent-dark-color: #000;\n  --intent-dark-fadable-color: 0, 0, 0;\n  --grey-100: rgb(18, 18, 18);\n  --grey-200: rgb(34, 34, 34);\n  --grey-300: rgb(39, 39, 39);\n  --grey-400: rgb(44, 44, 44);\n  --grey-500: rgb(51, 51, 51);\n  --grey-600: rgb(60, 60, 60);\n  --grey-700: rgb(67, 67, 67);\n  --grey-800: rgb(73, 73, 73);\n  --grey-900: rgb(117, 117, 117);\n  --grey-1000: rgb(171, 171, 171);\n  --grey-1100: rgb(179, 179, 179);\n  color: var(--text-primary-color);\n  --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n  --gds-comp-chips-fr-color: #dedede;\n  --gds-comp-chips-bg-color: #2c2c2c;\n  --gds-comp-chips-br-color: #2c2c2c;\n  --gds-comp-chips-fr-color-hover: #dedede;\n  --gds-comp-chips-bg-color-hover: #2c2c2c;\n  --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n  --gds-comp-chips-bg-color-active: #222222;\n  --gds-comp-chips-bg-color-action: #2c2c2c;\n  --gds-sys-color-focus-outline: white;\n  --gds-sys-color-font: var(--gds-ref-pallet-base300);\n  /* generate css variables */\n  --sg-z-index-datepicker: 995;\n  --sg-z-index-dropdown-backdrop: 990;\n  --sg-z-index-dropdown: 2000;\n  --sg-z-index-sticky: 1020;\n  --sg-z-index-fixed: 1030;\n  --sg-z-index-modal-backdrop: 1040;\n  --sg-z-index-modal: 1050;\n  --sg-z-index-popover: 1060;\n  --sg-z-index-tooltip: 1070;\n  --sg-text-primary: #dedede;\n  --sg-text-secondary: #ababab;\n  --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n  --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n  --sg-border-color: #ababab;\n  --sg-border-width: 1px;\n  --sg-border-width-50: 0.5px;\n  --sg-border-radius: 0.25rem;\n  --sg-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n  --sg-hsl-light-contrast: 0deg, 0%, 0%;\n  --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n  --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n  --sg-hsl-black: 0deg, 0%, 0%;\n  --sg-hsl-white: 0deg, 0%, 100%;\n  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n  --sg-grey-100: #dedede;\n  --sg-grey-200: #ababab;\n  --sg-grey-300: #757575;\n  --sg-grey-400: #494949;\n  --sg-grey-500: #333333;\n  --sg-grey-600: #2c2c2c;\n  --sg-grey-700: #272727;\n  --sg-grey-800: #222222;\n  --sg-grey-900: #121212;\n  --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n  --sg-hsl-disabled-background: 0deg, 0%, 20%;\n  --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n  --sg-bg-level-0: #121212;\n  --sg-bg-level-1: #222222;\n  --sg-bg-level-2: #272727;\n  --sg-bg-level-3: #2c2c2c;\n  --sg-table-header-background: #121212;\n  --sg-table-header-color: #fff;\n  --sg-table-cell-padding-x: 0.5rem;\n  --sg-table-cell-padding-y: 0.6875rem;\n  --sg-table-border-width: 1px;\n  --sg-table-border-color: #ababab;\n  --sg-table-sort-icon-color: #ababab;\n  --sg-table-sort-icon-color-active: #fff;\n  --sg-skeleton-loader-highlight-color: #494949;\n  --sg-skeleton-loader-background-color: #2c2c2c;\n  --sg-modal-background: #272727;\n  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-popover-background: #222222;\n  --sg-popover-border-color: #007ac7;\n  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n  --sg-card-background: #222222;\n  --sg-card-heading-color: #dedede;\n  --sg-card-color: #dedede;\n  --sg-card-border: solid 1px #222222;\n  --sg-card-border-radius: 4px;\n  --gds-sys-color-blue: #58b8ee;\n  --gds-sys-color-dark-blue-1: #00adff;\n  --gds-sys-color-dark-blue-2: #2c9cd9;\n  --gds-sys-color-green: #60cd18;\n  --gds-sys-color-dark-green-1: #75b44a;\n  --gds-sys-color-dark-green-2: #308800;\n  --gds-sys-color-yellow: #ffe182;\n  --gds-sys-color-dark-yellow-1: #f0be47;\n  --gds-sys-color-dark-yellow-2: #ebab39;\n  --gds-sys-color-text-primary: #dedede;\n  --gds-sys-color-text-secondary: #ababab;\n  --gds-sys-color-text-white: #ffffff;\n  --gds-sys-color-text-black: #333333;\n  --gds-sys-color-text-inverted: #333333;\n  --gds-sys-color-text-link: #2c9cd9;\n  --gds-sys-color-text-error: #ff594f;\n  --gds-sys-color-text-disabled: #464646;\n  --gds-sys-color-red: #f7706d;\n  --gds-sys-color-dark-red-1: #c82a29;\n  --gds-sys-color-dark-red-2: #9e2120;\n  --gds-sys-color-purple: #ad91dc;\n  --gds-sys-color-dark-purple-1: #7e52cc;\n  --gds-sys-color-dark-purple-2: #4a328f;\n  --gds-sys-color-white: #ffffff;\n  --gds-sys-color-black: #000000;\n  --gds-sys-color-background-primary: #222222;\n  --gds-sys-color-background-secondary: #1a1a1a;\n  --gds-sys-color-base100: #121212;\n  --gds-sys-color-base200: #222222;\n  --gds-sys-color-base300: #272727;\n  --gds-sys-color-base400: #2c2c2c;\n  --gds-sys-color-base500: #333333;\n  --gds-sys-color-base600: #494949;\n  --gds-sys-color-base700: #757575;\n  --gds-sys-color-base800: #ababab;\n  --gds-sys-color-base900: #dedede;\n  --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n  --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n  :host,\n  :host([color-scheme=auto]) {\n    --heading-primary-color: rgb(255, 255, 255);\n    --text-primary-color: rgba(255, 255, 255, 0.9);\n    --text-secondary-color: rgba(255, 255, 255, 0.6);\n    --text-disabled-color: rgba(255, 255, 255, 0.07);\n    --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n    --border-color: rgb(51, 51, 51);\n    --border-secondary-color: rgb(51, 51, 51);\n    --border-disabled-color: rgb(44, 44, 44);\n    --border-primary-disabled-color: rgb(44, 44, 44);\n    --border-color-invalid: rgb(255, 89, 79);\n    --border-color-valid: rgb(48, 136, 0);\n    --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n    --link-color-dark: rgb(179, 179, 179);\n    --link-color-dark-visited: rgb(171, 171, 171);\n    --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-primary-background: rgb(44, 156, 217);\n    --intent-primary-color: #000;\n    --intent-primary-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-secondary-background: rgb(51, 51, 51);\n    --intent-secondary-color: #fff;\n    --intent-secondary-fadable-color: 255, 255, 255;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-info-background: rgb(44, 156, 217);\n    --intent-info-color: #000;\n    --intent-info-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-success-background: rgb(48, 136, 0);\n    --intent-success-color: #000;\n    --intent-success-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-warning-background: rgb(255, 225, 130);\n    --intent-warning-color: #000;\n    --intent-warning-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-danger-background: rgb(255, 89, 79);\n    --intent-danger-color: #000;\n    --intent-danger-fadable-color: 0, 0, 0;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-light-background: rgb(39, 39, 39);\n    --intent-light-color: #fff;\n    --intent-light-fadable-color: 255, 255, 255;\n    /* try and adjust colors to get desired color combination,\n    in this case adjust background to go with white foreground */\n    --intent-dark-background: rgb(171, 171, 171);\n    --intent-dark-color: #000;\n    --intent-dark-fadable-color: 0, 0, 0;\n    --grey-100: rgb(18, 18, 18);\n    --grey-200: rgb(34, 34, 34);\n    --grey-300: rgb(39, 39, 39);\n    --grey-400: rgb(44, 44, 44);\n    --grey-500: rgb(51, 51, 51);\n    --grey-600: rgb(60, 60, 60);\n    --grey-700: rgb(67, 67, 67);\n    --grey-800: rgb(73, 73, 73);\n    --grey-900: rgb(117, 117, 117);\n    --grey-1000: rgb(171, 171, 171);\n    --grey-1100: rgb(179, 179, 179);\n    color: var(--text-primary-color);\n    --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n    --gds-comp-chips-fr-color: #dedede;\n    --gds-comp-chips-bg-color: #2c2c2c;\n    --gds-comp-chips-br-color: #2c2c2c;\n    --gds-comp-chips-fr-color-hover: #dedede;\n    --gds-comp-chips-bg-color-hover: #2c2c2c;\n    --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n    --gds-comp-chips-bg-color-active: #222222;\n    --gds-comp-chips-bg-color-action: #2c2c2c;\n    --gds-sys-color-focus-outline: white;\n    --gds-sys-color-font: var(--gds-ref-pallet-base300);\n    /* generate css variables */\n    --sg-z-index-datepicker: 995;\n    --sg-z-index-dropdown-backdrop: 990;\n    --sg-z-index-dropdown: 2000;\n    --sg-z-index-sticky: 1020;\n    --sg-z-index-fixed: 1030;\n    --sg-z-index-modal-backdrop: 1040;\n    --sg-z-index-modal: 1050;\n    --sg-z-index-popover: 1060;\n    --sg-z-index-tooltip: 1070;\n    --sg-text-primary: #dedede;\n    --sg-text-secondary: #ababab;\n    --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n    --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n    --sg-border-color: #ababab;\n    --sg-border-width: 1px;\n    --sg-border-width-50: 0.5px;\n    --sg-border-radius: 0.25rem;\n    --sg-hsl-contrast: 0deg, 0%, 100%;\n    --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n    --sg-hsl-light-contrast: 0deg, 0%, 0%;\n    --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n    --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n    --sg-hsl-black: 0deg, 0%, 0%;\n    --sg-hsl-white: 0deg, 0%, 100%;\n    --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n    --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n    --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n    --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n    --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n    --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n    --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n    --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n    --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n    --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n    --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n    --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n    --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n    --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n    --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n    --sg-grey-100: #dedede;\n    --sg-grey-200: #ababab;\n    --sg-grey-300: #757575;\n    --sg-grey-400: #494949;\n    --sg-grey-500: #333333;\n    --sg-grey-600: #2c2c2c;\n    --sg-grey-700: #272727;\n    --sg-grey-800: #222222;\n    --sg-grey-900: #121212;\n    --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n    --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n    --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n    --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n    --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n    --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n    --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n    --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n    --sg-hsl-disabled-background: 0deg, 0%, 20%;\n    --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n    --sg-bg-level-0: #121212;\n    --sg-bg-level-1: #222222;\n    --sg-bg-level-2: #272727;\n    --sg-bg-level-3: #2c2c2c;\n    --sg-table-header-background: #121212;\n    --sg-table-header-color: #fff;\n    --sg-table-cell-padding-x: 0.5rem;\n    --sg-table-cell-padding-y: 0.6875rem;\n    --sg-table-border-width: 1px;\n    --sg-table-border-color: #ababab;\n    --sg-table-sort-icon-color: #ababab;\n    --sg-table-sort-icon-color-active: #fff;\n    --sg-skeleton-loader-highlight-color: #494949;\n    --sg-skeleton-loader-background-color: #2c2c2c;\n    --sg-modal-background: #272727;\n    --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n    --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-popover-background: #222222;\n    --sg-popover-border-color: #007ac7;\n    --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    --sg-card-background: #222222;\n    --sg-card-heading-color: #dedede;\n    --sg-card-color: #dedede;\n    --sg-card-border: solid 1px #222222;\n    --sg-card-border-radius: 4px;\n  }\n}";
 export default styles;

package/generated/react/blur/index.d.ts

@@ -0,0 +1,365 @@
+import { getReactComponent } from "../../../utils/react";
+import { GdsBlur as GdsBlurClass } from "../../../components/blur/blur.component";
+export declare const GdsBlur: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsBlurClass>>>) => import("react").ReactElement<Omit<{
+    render?: (() => any) | undefined;
+    gdsElementName?: string | undefined;
+    _isUsingTransitionalStyles?: boolean | undefined;
+    _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
+    connectedCallback?: (() => void) | undefined;
+    disconnectedCallback?: (() => void) | undefined;
+    readonly renderOptions?: import("lit-html").RenderOptions | undefined;
+    readonly renderRoot?: HTMLElement | DocumentFragment | undefined;
+    isUpdatePending?: boolean | undefined;
+    hasUpdated?: boolean | undefined;
+    addController?: ((controller: import("lit").ReactiveController) => void) | undefined;
+    removeController?: ((controller: import("lit").ReactiveController) => void) | undefined;
+    attributeChangedCallback?: ((name: string, _old: string | null, value: string | null) => void) | undefined;
+    requestUpdate?: ((name?: PropertyKey | undefined, oldValue?: unknown, options?: import("lit").PropertyDeclaration<unknown, unknown> | undefined) => void) | undefined;
+    readonly updateComplete?: Promise<boolean> | undefined;
+    accessKey?: string | undefined;
+    readonly accessKeyLabel?: string | undefined;
+    autocapitalize?: string | undefined;
+    dir?: string | undefined;
+    draggable?: boolean | undefined;
+    hidden?: boolean | undefined;
+    inert?: boolean | undefined;
+    innerText?: string | undefined;
+    lang?: string | undefined;
+    readonly offsetHeight?: number | undefined;
+    readonly offsetLeft?: number | undefined;
+    readonly offsetParent?: Element | null | undefined;
+    readonly offsetTop?: number | undefined;
+    readonly offsetWidth?: number | undefined;
+    outerText?: string | undefined;
+    popover?: string | null | undefined;
+    spellcheck?: boolean | undefined;
+    title?: string | undefined;
+    translate?: boolean | undefined;
+    attachInternals?: (() => ElementInternals) | undefined;
+    click?: (() => void) | undefined;
+    hidePopover?: (() => void) | undefined;
+    showPopover?: (() => void) | undefined;
+    togglePopover?: ((force?: boolean | undefined) => boolean) | undefined;
+    addEventListener?: {
+        <K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+    } | undefined;
+    removeEventListener?: {
+        <K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+    } | undefined;
+    readonly attributes?: NamedNodeMap | undefined;
+    readonly classList?: DOMTokenList | undefined;
+    className?: string | undefined;
+    readonly clientHeight?: number | undefined;
+    readonly clientLeft?: number | undefined;
+    readonly clientTop?: number | undefined;
+    readonly clientWidth?: number | undefined;
+    id?: string | undefined;
+    readonly localName?: string | undefined;
+    readonly namespaceURI?: string | null | undefined;
+    onfullscreenchange?: ((this: Element, ev: Event) => any) | null | undefined;
+    onfullscreenerror?: ((this: Element, ev: Event) => any) | null | undefined;
+    outerHTML?: string | undefined;
+    readonly ownerDocument?: Document | undefined;
+    readonly part?: DOMTokenList | undefined;
+    readonly prefix?: string | null | undefined;
+    readonly scrollHeight?: number | undefined;
+    scrollLeft?: number | undefined;
+    scrollTop?: number | undefined;
+    readonly scrollWidth?: number | undefined;
+    readonly shadowRoot?: ShadowRoot | null | undefined;
+    slot?: string | undefined;
+    readonly tagName?: string | undefined;
+    attachShadow?: ((init: ShadowRootInit) => ShadowRoot) | undefined;
+    checkVisibility?: ((options?: CheckVisibilityOptions | undefined) => boolean) | undefined;
+    closest?: {
+        <K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        <K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        <K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
+        <E extends Element = Element>(selectors: string): E | null;
+    } | undefined;
+    computedStyleMap?: (() => StylePropertyMapReadOnly) | undefined;
+    getAttribute?: ((qualifiedName: string) => string | null) | undefined;
+    getAttributeNS?: ((namespace: string | null, localName: string) => string | null) | undefined;
+    getAttributeNames?: (() => string[]) | undefined;
+    getAttributeNode?: ((qualifiedName: string) => Attr | null) | undefined;
+    getAttributeNodeNS?: ((namespace: string | null, localName: string) => Attr | null) | undefined;
+    getBoundingClientRect?: (() => DOMRect) | undefined;
+    getClientRects?: (() => DOMRectList) | undefined;
+    getElementsByClassName?: ((classNames: string) => HTMLCollectionOf<Element>) | undefined;
+    getElementsByTagName?: {
+        <K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
+        <K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
+        <K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
+        <K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
+        (qualifiedName: string): HTMLCollectionOf<Element>;
+    } | undefined;
+    getElementsByTagNameNS?: {
+        (namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        (namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        (namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+        (namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    } | undefined;
+    hasAttribute?: ((qualifiedName: string) => boolean) | undefined;
+    hasAttributeNS?: ((namespace: string | null, localName: string) => boolean) | undefined;
+    hasAttributes?: (() => boolean) | undefined;
+    hasPointerCapture?: ((pointerId: number) => boolean) | undefined;
+    insertAdjacentElement?: ((where: InsertPosition, element: Element) => Element | null) | undefined;
+    insertAdjacentHTML?: ((position: InsertPosition, text: string) => void) | undefined;
+    insertAdjacentText?: ((where: InsertPosition, data: string) => void) | undefined;
+    matches?: ((selectors: string) => boolean) | undefined;
+    releasePointerCapture?: ((pointerId: number) => void) | undefined;
+    removeAttribute?: ((qualifiedName: string) => void) | undefined;
+    removeAttributeNS?: ((namespace: string | null, localName: string) => void) | undefined;
+    removeAttributeNode?: ((attr: Attr) => Attr) | undefined;
+    requestFullscreen?: ((options?: FullscreenOptions | undefined) => Promise<void>) | undefined;
+    requestPointerLock?: (() => void) | undefined;
+    scroll?: {
+        (options?: ScrollToOptions | undefined): void;
+        (x: number, y: number): void;
+    } | undefined;
+    scrollBy?: {
+        (options?: ScrollToOptions | undefined): void;
+        (x: number, y: number): void;
+    } | undefined;
+    scrollIntoView?: ((arg?: boolean | ScrollIntoViewOptions | undefined) => void) | undefined;
+    scrollTo?: {
+        (options?: ScrollToOptions | undefined): void;
+        (x: number, y: number): void;
+    } | undefined;
+    setAttribute?: ((qualifiedName: string, value: string) => void) | undefined;
+    setAttributeNS?: ((namespace: string | null, qualifiedName: string, value: string) => void) | undefined;
+    setAttributeNode?: ((attr: Attr) => Attr | null) | undefined;
+    setAttributeNodeNS?: ((attr: Attr) => Attr | null) | undefined;
+    setPointerCapture?: ((pointerId: number) => void) | undefined;
+    toggleAttribute?: ((qualifiedName: string, force?: boolean | undefined) => boolean) | undefined;
+    webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+    readonly baseURI?: string | undefined;
+    readonly childNodes?: NodeListOf<ChildNode> | undefined;
+    readonly firstChild?: ChildNode | null | undefined;
+    readonly isConnected?: boolean | undefined;
+    readonly lastChild?: ChildNode | null | undefined;
+    readonly nextSibling?: ChildNode | null | undefined;
+    readonly nodeName?: string | undefined;
+    readonly nodeType?: number | undefined;
+    nodeValue?: string | null | undefined;
+    readonly parentElement?: HTMLElement | null | undefined;
+    readonly parentNode?: ParentNode | null | undefined;
+    readonly previousSibling?: ChildNode | null | undefined;
+    textContent?: string | null | undefined;
+    appendChild?: (<T extends Node>(node: T) => T) | undefined;
+    cloneNode?: ((deep?: boolean | undefined) => Node) | undefined;
+    compareDocumentPosition?: ((other: Node) => number) | undefined;
+    contains?: ((other: Node | null) => boolean) | undefined;
+    getRootNode?: ((options?: GetRootNodeOptions | undefined) => Node) | undefined;
+    hasChildNodes?: (() => boolean) | undefined;
+    insertBefore?: (<T_1 extends Node>(node: T_1, child: Node | null) => T_1) | undefined;
+    isDefaultNamespace?: ((namespace: string | null) => boolean) | undefined;
+    isEqualNode?: ((otherNode: Node | null) => boolean) | undefined;
+    isSameNode?: ((otherNode: Node | null) => boolean) | undefined;
+    lookupNamespaceURI?: ((prefix: string | null) => string | null) | undefined;
+    lookupPrefix?: ((namespace: string | null) => string | null) | undefined;
+    normalize?: (() => void) | undefined;
+    removeChild?: (<T_2 extends Node>(child: T_2) => T_2) | undefined;
+    replaceChild?: (<T_3 extends Node>(node: Node, child: T_3) => T_3) | undefined;
+    readonly ELEMENT_NODE?: 1 | undefined;
+    readonly ATTRIBUTE_NODE?: 2 | undefined;
+    readonly TEXT_NODE?: 3 | undefined;
+    readonly CDATA_SECTION_NODE?: 4 | undefined;
+    readonly ENTITY_REFERENCE_NODE?: 5 | undefined;
+    readonly ENTITY_NODE?: 6 | undefined;
+    readonly PROCESSING_INSTRUCTION_NODE?: 7 | undefined;
+    readonly COMMENT_NODE?: 8 | undefined;
+    readonly DOCUMENT_NODE?: 9 | undefined;
+    readonly DOCUMENT_TYPE_NODE?: 10 | undefined;
+    readonly DOCUMENT_FRAGMENT_NODE?: 11 | undefined;
+    readonly NOTATION_NODE?: 12 | undefined;
+    readonly DOCUMENT_POSITION_DISCONNECTED?: 1 | undefined;
+    readonly DOCUMENT_POSITION_PRECEDING?: 2 | undefined;
+    readonly DOCUMENT_POSITION_FOLLOWING?: 4 | undefined;
+    readonly DOCUMENT_POSITION_CONTAINS?: 8 | undefined;
+    readonly DOCUMENT_POSITION_CONTAINED_BY?: 16 | undefined;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC?: 32 | undefined;
+    dispatchEvent?: ((event: Event) => boolean) | undefined;
+    ariaAtomic?: string | null | undefined;
+    ariaAutoComplete?: string | null | undefined;
+    ariaBusy?: string | null | undefined;
+    ariaChecked?: string | null | undefined;
+    ariaColCount?: string | null | undefined;
+    ariaColIndex?: string | null | undefined;
+    ariaColSpan?: string | null | undefined;
+    ariaCurrent?: string | null | undefined;
+    ariaDescription?: string | null | undefined;
+    ariaDisabled?: string | null | undefined;
+    ariaExpanded?: string | null | undefined;
+    ariaHasPopup?: string | null | undefined;
+    ariaHidden?: string | null | undefined;
+    ariaInvalid?: string | null | undefined;
+    ariaKeyShortcuts?: string | null | undefined;
+    ariaLabel?: string | null | undefined;
+    ariaLevel?: string | null | undefined;
+    ariaLive?: string | null | undefined;
+    ariaModal?: string | null | undefined;
+    ariaMultiLine?: string | null | undefined;
+    ariaMultiSelectable?: string | null | undefined;
+    ariaOrientation?: string | null | undefined;
+    ariaPlaceholder?: string | null | undefined;
+    ariaPosInSet?: string | null | undefined;
+    ariaPressed?: string | null | undefined;
+    ariaReadOnly?: string | null | undefined;
+    ariaRequired?: string | null | undefined;
+    ariaRoleDescription?: string | null | undefined;
+    ariaRowCount?: string | null | undefined;
+    ariaRowIndex?: string | null | undefined;
+    ariaRowSpan?: string | null | undefined;
+    ariaSelected?: string | null | undefined;
+    ariaSetSize?: string | null | undefined;
+    ariaSort?: string | null | undefined;
+    ariaValueMax?: string | null | undefined;
+    ariaValueMin?: string | null | undefined;
+    ariaValueNow?: string | null | undefined;
+    ariaValueText?: string | null | undefined;
+    role?: string | null | undefined;
+    animate?: ((keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined) => Animation) | undefined;
+    getAnimations?: ((options?: GetAnimationsOptions | undefined) => Animation[]) | undefined;
+    after?: ((...nodes: (string | Node)[]) => void) | undefined;
+    before?: ((...nodes: (string | Node)[]) => void) | undefined;
+    remove?: (() => void) | undefined;
+    replaceWith?: ((...nodes: (string | Node)[]) => void) | undefined;
+    innerHTML?: string | undefined;
+    readonly nextElementSibling?: Element | null | undefined;
+    readonly previousElementSibling?: Element | null | undefined;
+    readonly childElementCount?: number | undefined;
+    readonly children?: HTMLCollection | undefined;
+    readonly firstElementChild?: Element | null | undefined;
+    readonly lastElementChild?: Element | null | undefined;
+    append?: ((...nodes: (string | Node)[]) => void) | undefined;
+    prepend?: ((...nodes: (string | Node)[]) => void) | undefined;
+    querySelector?: {
+        <K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
+        <K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
+        <K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
+        <K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
+        <E_1 extends Element = Element>(selectors: string): E_1 | null;
+    } | undefined;
+    querySelectorAll?: {
+        <K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
+        <K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
+        <K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
+        <K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
+        <E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+    } | undefined;
+    replaceChildren?: ((...nodes: (string | Node)[]) => void) | undefined;
+    readonly assignedSlot?: HTMLSlotElement | null | undefined;
+    readonly attributeStyleMap?: StylePropertyMap | undefined;
+    readonly style?: CSSStyleDeclaration | undefined;
+    contentEditable?: string | undefined;
+    enterKeyHint?: string | undefined;
+    inputMode?: string | undefined;
+    readonly isContentEditable?: boolean | undefined;
+    onabort?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null | undefined;
+    onanimationcancel?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onanimationend?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onanimationiteration?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onanimationstart?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onauxclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onbeforeinput?: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null | undefined;
+    onbeforetoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onblur?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
+    oncancel?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncanplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncanplaythrough?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onclose?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncontextmenu?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    oncopy?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
+    oncuechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncut?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
+    ondblclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    ondrag?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragend?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragenter?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragleave?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragover?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragstart?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondrop?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondurationchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onemptied?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onended?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onerror?: OnErrorEventHandler | undefined;
+    onfocus?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
+    onformdata?: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null | undefined;
+    ongotpointercapture?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    oninput?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oninvalid?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onkeydown?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
+    onkeypress?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
+    onkeyup?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
+    onload?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onloadeddata?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onloadedmetadata?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onloadstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onlostpointercapture?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onmousedown?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseenter?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseleave?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmousemove?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseout?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseover?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseup?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onpaste?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
+    onpause?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onplaying?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onpointercancel?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerdown?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerenter?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerleave?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointermove?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerout?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerover?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerup?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onprogress?: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null | undefined;
+    onratechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onreset?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onresize?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null | undefined;
+    onscroll?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onscrollend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onsecuritypolicyviolation?: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null | undefined;
+    onseeked?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onseeking?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onselect?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onselectionchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onselectstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onslotchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onstalled?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onsubmit?: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null | undefined;
+    onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    ontransitionend?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    ontransitionrun?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    ontransitionstart?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    onvolumechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwaiting?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkitanimationend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkitanimationiteration?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkitanimationstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkittransitionend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwheel?: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null | undefined;
+    autofocus?: boolean | undefined;
+    readonly dataset?: DOMStringMap | undefined;
+    nonce?: string | undefined;
+    tabIndex?: number | undefined;
+    blur?: (() => void) | undefined;
+    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
+}, "children"> & {
+    children?: import("react").ReactNode;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "children"> & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;

package/generated/react/blur/index.js

@@ -0,0 +1,13 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsBlur as GdsBlurClass } from "../../../components/blur/blur.component.js";
+import { createElement } from "react";
+const GdsBlur = (props) => {
+  GdsBlurClass.define();
+  const JSXElement = getReactComponent("gds-blur");
+  const propsWithClass = { ...props, class: props.className };
+  return createElement(JSXElement, propsWithClass);
+};
+export {
+  GdsBlur
+};