@sebgroup/green-core 1.76.1 → 1.76.2

package/components/datepicker/datepicker.component.d.ts

@@ -61,6 +61,10 @@ declare class Datepicker extends GdsFormControlElement<Date> {
      * An array of dates that should be disabled in the calendar.
      */
     disabledDates?: Date[];
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
     /**
      * Get the currently focused date in the calendar popover. If no date is focused, or the calendar popover
      * is closed, the value will be undefined.

package/components/datepicker/datepicker.component.js

@@ -70,6 +70,7 @@ let Datepicker = class extends GdsFormControlElement {
     this.showWeekNumbers = false;
     this.hideLabel = false;
     this.disabledWeekends = false;
+    this.showExtendedSupportingText = false;
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
@@ -278,7 +279,10 @@ let Datepicker = class extends GdsFormControlElement {
     return html`
       ${when(
       !this.plain,
-      () => html`<gds-form-control-header class="size-${this.size}">
+      () => html`<gds-form-control-header
+            class="size-${this.size}"
+            .showExtendedSupportingText="${this.showExtendedSupportingText}"
+          >
             <label id="label" for="spinner-0" slot="label">${this.label}</label>
             ${when(
         this.supportingText.length > 0,
@@ -698,6 +702,13 @@ __decorateClass([
 __decorateClass([
   property({ converter: dateArrayConverter, attribute: "disabled-dates" })
 ], Datepicker.prototype, "disabledDates", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], Datepicker.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   queryAsync("#calendar-button")
 ], Datepicker.prototype, "test_calendarButton", 2);

package/components/dropdown/dropdown.component.d.ts

@@ -107,6 +107,10 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * Whether to disable the mobile styles.
      */
     disableMobileStyles: boolean;
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
     /**
      * Get the options of the dropdown.
      */

package/components/dropdown/dropdown.component.js

@@ -52,6 +52,7 @@ let GdsDropdown = class extends GdsFormControlElement {
     this.hideLabel = false;
     this.plain = false;
     this.disableMobileStyles = false;
+    this.showExtendedSupportingText = false;
     __privateAdd(this, _optionElements, void 0);
     __privateAdd(this, _renderCombobox, () => {
       return html`
@@ -298,7 +299,10 @@ let GdsDropdown = class extends GdsFormControlElement {
       ${when(
       !this.plain && !this.hideLabel,
       () => html`
-          <gds-form-control-header class="size-${this.size}">
+          <gds-form-control-header
+            class="size-${this.size}"
+            .showExtendedSupportingText="${this.showExtendedSupportingText}"
+          >
             <label id="label" for="trigger" slot="label">${this.label}</label>
             ${when(
         this.supportingText.length > 0,
@@ -336,10 +340,7 @@ let GdsDropdown = class extends GdsFormControlElement {
         >
           <slot name="lead" slot="lead"></slot>
           ${this.combobox && !this.multiple ? __privateGet(this, _renderCombobox).call(this) : __privateGet(this, _renderTriggerButton).call(this)}
-          <gds-icon-chevron-bottom
-            slot="trail"
-            label=${msg("Expand")}
-          ></gds-icon-chevron-bottom>
+          <gds-icon-chevron-bottom slot="trail"></gds-icon-chevron-bottom>
         </gds-field-base>
 
         ${when(
@@ -517,6 +518,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], GdsDropdown.prototype, "disableMobileStyles", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], GdsDropdown.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   query("#trigger")
 ], GdsDropdown.prototype, "_elTriggerBtn", 2);

package/components/radio/radio-group/radio-group.component.js

@@ -207,7 +207,10 @@ renderRadioGroupContents_fn = function() {
 _renderFieldControlHeader = new WeakSet();
 renderFieldControlHeader_fn = function() {
   if (this.label) {
-    return html` <gds-form-control-header class="size-${this.size}">
+    return html` <gds-form-control-header
+        class="size-${this.size}"
+        .showExtendedSupportingText="${this.showExtendedSupportingText}"
+      >
         <label id="group-label" slot="label">${this.label}</label>
         <span slot="supporting-text" id="supporting-text">
           ${this.supportingText}

package/components/select/select.component.d.ts

@@ -7,6 +7,10 @@ declare class Select<ValueT = string> extends GdsFormControlElement<ValueT | Val
      * This text provides additional context or information to the user.
      */
     supportingText: string;
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
     /**
      * Controls the font-size of texts and height of the field.
      */

package/components/select/select.component.js

@@ -59,6 +59,7 @@ let Select = class extends GdsFormControlElement {
      */
     __privateAdd(this, _renderChevron);
     this.supportingText = "";
+    this.showExtendedSupportingText = false;
     this.size = "large";
     this.plain = false;
     __privateAdd(this, _isValueInitialized, false);
@@ -121,13 +122,20 @@ let Select = class extends GdsFormControlElement {
     return html`
       ${when(
       !this.plain,
-      () => html`<gds-form-control-header class="size-${this.size}">
-            <label for="select" slot="label" id="label-text"
-              >${this.label}</label
-            >
+      () => html`<gds-form-control-header
+            class="size-${this.size}"
+            .showExtendedSupportingText=${this.showExtendedSupportingText}
+          >
+            <label for="select" slot="label" id="label-text">
+              ${this.label}
+            </label>
             <span slot="supporting-text" id="supporting-text">
               ${this.supportingText}
             </span>
+            <slot
+              name="extended-supporting-text"
+              slot="extended-supporting-text"
+            ></slot>
           </gds-form-control-header>`
     )}
 
@@ -262,6 +270,13 @@ Select.styles = [tokens, formControlHostStyles, styles];
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], Select.prototype, "supportingText", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], Select.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   property({ type: String })
 ], Select.prototype, "size", 2);

package/components/textarea/textarea.component.d.ts

@@ -25,6 +25,10 @@ declare class Textarea extends GdsFormControlElement<string> {
      * When set to 'false', the textarea will not be resizable.
      */
     resizable: 'auto' | 'manual' | 'false';
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
     /**
      * The maximum number of characters allowed in the field.
      */

package/components/textarea/textarea.component.js

@@ -43,6 +43,7 @@ let Textarea = class extends GdsFormControlElement {
     this.supportingText = "";
     this.clearable = false;
     this.resizable = "auto";
+    this.showExtendedSupportingText = false;
     this.maxlength = Number.MAX_SAFE_INTEGER;
     this.size = "large";
     this.plain = false;
@@ -158,7 +159,10 @@ let Textarea = class extends GdsFormControlElement {
     return html`
       ${when(
       !this.plain,
-      () => html`<gds-form-control-header class="size-${this.size}">
+      () => html`<gds-form-control-header
+            class="size-${this.size}"
+            .showExtendedSupportingText="${this.showExtendedSupportingText}"
+          >
             <label for="input" slot="label">${this.label}</label>
             <span slot="supporting-text" id="supporting-text">
               ${this.supportingText}
@@ -321,6 +325,13 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], Textarea.prototype, "resizable", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], Textarea.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   property({ type: Number })
 ], Textarea.prototype, "maxlength", 2);

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 Wed, 16 Apr 2025 11:48:17 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 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 Wed, 23 Apr 2025 12:41:39 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 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/locales/da.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/da.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Annuller`,
   "s39938ecdae568740": `September`,
-  "s3b151ca64eb26ec1": `Udvide`,
   "s407a88a592a0987c": `August`,
   "s46d6587089bd0356": `N\xE6ste m\xE5ned`,
   "s49730f3d5751a433": `Indl\xE6ser...`,

package/generated/locales/de.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/de.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Abbrechen`,
   "s39938ecdae568740": `September`,
-  "s3b151ca64eb26ec1": `Expandieren`,
   "s407a88a592a0987c": `August`,
   "s46d6587089bd0356": `N\xE4chster Monat`,
   "s49730f3d5751a433": `Laden...`,

package/generated/locales/fi.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/fi.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `Marraskuu`,
   "s2ceb11be2290bb1b": `Peruuta`,
   "s39938ecdae568740": `Syys`,
-  "s3b151ca64eb26ec1": `Laajentaa`,
   "s407a88a592a0987c": `Elokuu`,
   "s46d6587089bd0356": `Seuraava kuukausi`,
   "s49730f3d5751a433": `Ladataan...`,

package/generated/locales/fr.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/fr.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `Novembre`,
   "s2ceb11be2290bb1b": `Annuler`,
   "s39938ecdae568740": `Septembre`,
-  "s3b151ca64eb26ec1": `D\xE9velopper`,
   "s407a88a592a0987c": `Ao\xFBt`,
   "s46d6587089bd0356": `Mois suivant`,
   "s49730f3d5751a433": `Chargement...`,

package/generated/locales/it.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/it.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `Novembre`,
   "s2ceb11be2290bb1b": `Annulla`,
   "s39938ecdae568740": `Settembre`,
-  "s3b151ca64eb26ec1": `Espandere`,
   "s407a88a592a0987c": `Agosto`,
   "s46d6587089bd0356": `Mese successivo`,
   "s49730f3d5751a433": `Caricamento...`,

package/generated/locales/nl.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/nl.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Annuleren`,
   "s39938ecdae568740": `September`,
-  "s3b151ca64eb26ec1": `Uitbreiden`,
   "s407a88a592a0987c": `Augustus`,
   "s46d6587089bd0356": `Volgende maand`,
   "s49730f3d5751a433": `Laden...`,

package/generated/locales/no.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/no.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Avbryt`,
   "s39938ecdae568740": `September`,
-  "s3b151ca64eb26ec1": `Utvide`,
   "s407a88a592a0987c": `August`,
   "s46d6587089bd0356": `Neste m\xE5ned`,
   "s49730f3d5751a433": `Laster...`,

package/generated/locales/sv.d.ts

@@ -8,7 +8,6 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
-    s3b151ca64eb26ec1: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/sv.js

@@ -10,7 +10,6 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Avbryt`,
   "s39938ecdae568740": `September`,
-  "s3b151ca64eb26ec1": `Expandera`,
   "s407a88a592a0987c": `Augusti`,
   "s46d6587089bd0356": `N\xE4sta m\xE5nad`,
   "s49730f3d5751a433": `Laddar...`,

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

@@ -30,6 +30,7 @@ export declare const GdsDatepicker: (props: React.ComponentProps<ReturnType<type
     dateformat?: string | undefined;
     disabledWeekends?: boolean | undefined;
     disabledDates?: Date[] | undefined;
+    showExtendedSupportingText?: boolean | undefined;
     getFocusedDate?: (() => Promise<Date | undefined>) | undefined;
     readonly displayValue?: string | undefined;
     test_calendarButton?: Promise<HTMLButtonElement> | undefined;

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

@@ -15,6 +15,7 @@ export declare const GdsDropdown: (props: React.ComponentProps<ReturnType<typeof
     hideLabel?: boolean | undefined;
     plain?: boolean | undefined;
     disableMobileStyles?: boolean | undefined;
+    showExtendedSupportingText?: boolean | undefined;
     readonly options?: import("../../../primitives/listbox/option.component").GdsOption[] | undefined;
     readonly placeholder?: import("../../../primitives/listbox/option.component").GdsOption | undefined;
     readonly displayValue?: string | undefined;

package/generated/react/index.d.ts

@@ -1,8 +1,8 @@
 export * from './badge/index.js';
 export * from './blur/index.js';
 export * from './button/index.js';
-export * from './card/index.js';
 export * from './calendar/index.js';
+export * from './card/index.js';
 export * from './coachmark/index.js';
 export * from './container/index.js';
 export * from './context-menu/index.js';
@@ -46,11 +46,6 @@ export * from './filter-chip/index.js';
 export * from './formatted-account/index.js';
 export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
-export * from './radio-group/index.js';
-export * from './segment/index.js';
-export * from './sensitive-account/index.js';
-export * from './sensitive-date/index.js';
-export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -338,3 +333,8 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
+export * from './radio-group/index.js';
+export * from './segment/index.js';
+export * from './sensitive-account/index.js';
+export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -1,8 +1,8 @@
 export * from "./badge/index.js";
 export * from "./blur/index.js";
 export * from "./button/index.js";
-export * from "./card/index.js";
 export * from "./calendar/index.js";
+export * from "./card/index.js";
 export * from "./coachmark/index.js";
 export * from "./container/index.js";
 export * from "./context-menu/index.js";
@@ -46,11 +46,6 @@ export * from "./filter-chip/index.js";
 export * from "./formatted-account/index.js";
 export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
-export * from "./radio-group/index.js";
-export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
-export * from "./sensitive-date/index.js";
-export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -338,3 +333,8 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
+export * from "./radio-group/index.js";
+export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
+export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";

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

@@ -18,6 +18,7 @@ export declare const GdsSelect: (props: React.ComponentProps<ReturnType<typeof g
     'margin-inline'?: string | undefined;
     'margin-block'?: string | undefined;
     supportingText?: string | undefined;
+    showExtendedSupportingText?: boolean | undefined;
     size?: "small" | "large" | undefined;
     plain?: boolean | undefined;
     selectElement?: HTMLSelectElement | undefined;

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

@@ -21,6 +21,7 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     supportingText?: string | undefined;
     clearable?: boolean | undefined;
     resizable?: "auto" | "false" | "manual" | undefined;
+    showExtendedSupportingText?: boolean | undefined;
     maxlength?: number | undefined;
     size?: "small" | "large" | undefined;
     plain?: boolean | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.76.1",
+  "version": "1.76.2",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/tokens/dark.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\ncolor-scheme: dark;\n  --gds-color-l1-background-primary: #0e0e0e;\n  --gds-color-l1-background-tertiary: #d7d7d7;\n  --gds-color-l1-background-secondary: #131313;\n  --gds-color-l1-content-positive: #54b561;\n  --gds-color-l1-content-negative: #a63e2a;\n  --gds-color-l1-content-primary: #d7d7d7;\n  --gds-color-l1-content-secondary: #ababab;\n  --gds-color-l1-content-tertiary: #1b1b1b;\n  --gds-color-l2-background-primary: #242424;\n  --gds-color-l2-background-secondary: #242424;\n  --gds-color-l2-background-tertiary: #d7d7d7;\n  --gds-color-l2-background-positive: #1d3f22;\n  --gds-color-l2-background-negative: #4a1c13;\n  --gds-color-l2-background-notice: #152c41;\n  --gds-color-l2-background-warning: #4c3212;\n  --gds-color-l2-background-information: #353535;\n  --gds-color-l2-background-copper-01: #f2efeb;\n  --gds-color-l2-background-copper-02: #332a18;\n  --gds-color-l2-background-purple-01: #f3eff7;\n  --gds-color-l2-background-purple-02: #372b40;\n  --gds-color-l2-background-green-01: #ecf6ed;\n  --gds-color-l2-background-green-02: #1d3f22;\n  --gds-color-l2-background-blue-01: #eaf0f7;\n  --gds-color-l2-background-blue-02: #152c41;\n  --gds-color-l2-content-primary: #d7d7d7;\n  --gds-color-l2-content-secondary: #ababab;\n  --gds-color-l2-content-tertiary: #1b1b1b;\n  --gds-color-l2-content-positive: #54b561;\n  --gds-color-l2-content-negative: #ee8375;\n  --gds-color-l2-content-warning: #f3b274;\n  --gds-color-l2-content-notice: #78a3d5;\n  --gds-color-l2-content-information: #d7d7d7;\n  --gds-color-l2-content-copper-01: #1b1b1b;\n  --gds-color-l2-content-copper-02: #ffffff;\n  --gds-color-l2-content-purple-01: #1b1b1b;\n  --gds-color-l2-content-purple-02: #ffffff;\n  --gds-color-l2-content-green-01: #1b1b1b;\n  --gds-color-l2-content-green-02: #ffffff;\n  --gds-color-l2-content-blue-01: #1b1b1b;\n  --gds-color-l2-content-blue-02: #ffffff;\n  --gds-color-l2-border-primary: #353535;\n  --gds-color-l2-border-secondary: #5e5e5e;\n  --gds-color-l2-border-tertiary: #2c2c2c;\n  --gds-color-l2-border-quarternary: #d7d7d7;\n  --gds-color-l2-border-inversed: #1b1b1b;\n  --gds-color-l3-background-primary: #d7d7d7;\n  --gds-color-l3-background-secondary: #353535;\n  --gds-color-l3-background-tertiary: #424242;\n  --gds-color-l3-background-quarternary: #0e0e0e;\n  --gds-color-l3-background-positive: #54b561;\n  --gds-color-l3-background-positive-secondary: #25512b;\n  --gds-color-l3-background-positive-badge: #306938;\n  --gds-color-l3-background-negative: #c04831;\n  --gds-color-l3-background-negative-secondary: #602418;\n  --gds-color-l3-background-negative-badge: #4A1C13;\n  --gds-color-l3-background-notice: #78a3d5;\n  --gds-color-l3-background-notice-secondary: #1A3853;\n  --gds-color-l3-background-notice-badge: #214769;\n  --gds-color-l3-background-warning: #f3b274;\n  --gds-color-l3-background-warning-secondary: #624017;\n  --gds-color-l3-background-warning-badge: #744C1B;\n  --gds-color-l3-background-information: #d7d7d7;\n  --gds-color-l3-background-information-secondary: #424242;\n  --gds-color-l3-background-information-badge: #616161;\n  --gds-color-l3-background-buy: #3571a6;\n  --gds-color-l3-background-copper-01: #e4ded5;\n  --gds-color-l3-background-copper-02: #42361f;\n  --gds-color-l3-background-purple-01: #e7deee;\n  --gds-color-l3-background-purple-02: #473752;\n  --gds-color-l3-background-green-01: #d7edd9;\n  --gds-color-l3-background-green-02: #25512b;\n  --gds-color-l3-background-blue-01: #d3dfef;\n  --gds-color-l3-background-blue-02: #1a3853;\n  --gds-color-l3-background-disabled: #181818;\n  --gds-color-l3-background-disabled-secondary: #1b1b1b;\n  --gds-color-l3-content-primary: #1b1b1b;\n  --gds-color-l3-content-secondary: #ababab;\n  --gds-color-l3-content-tertiary: #d7d7d7;\n  --gds-color-l3-content-notice: #78a3d5;\n  --gds-color-l3-content-warning: #f3b274;\n  --gds-color-l3-content-information: #d7d7d7;\n  --gds-color-l3-content-buy: #ffffff;\n  --gds-color-l3-content-copper-01: #1b1b1b;\n  --gds-color-l3-content-copper-02: #ffffff;\n  --gds-color-l3-content-purple-01: #1b1b1b;\n  --gds-color-l3-content-purple-02: #ffffff;\n  --gds-color-l3-content-green-01: #1b1b1b;\n  --gds-color-l3-content-green-02: #ffffff;\n  --gds-color-l3-content-blue-01: #1b1b1b;\n  --gds-color-l3-content-blue-02: #ffffff;\n  --gds-color-l3-content-disabled: #5e5e5e;\n  --gds-color-l3-content-positive: #54b561;\n  --gds-color-l3-content-negative: #ee8375;\n  --gds-color-l3-border-primary: #d7d7d7;\n  --gds-color-l3-border-secondary: #ababab;\n  --gds-color-l3-border-tertiary: #1b1b1b;\n  --gds-color-l3-border-negative: #ee8375;\n  --gds-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-color-l3-states-light-hover: #d7d7d7 10%;\n  --gds-color-l3-states-light-pressed: #d7d7d7 20%;\n  --gds-color-l3-states-positive-hover: #54b561 10%;\n  --gds-color-l3-states-positive-pressed: #54b561 20%;\n  --gds-color-l3-states-negative-hover: #ee8375 10%;\n  --gds-color-l3-states-negative-pressed: #ee8375 20%;\n";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 GMT\n */\n\ncolor-scheme: dark;\n  --gds-color-l1-background-primary: #0e0e0e;\n  --gds-color-l1-background-tertiary: #d7d7d7;\n  --gds-color-l1-background-secondary: #131313;\n  --gds-color-l1-content-positive: #54b561;\n  --gds-color-l1-content-negative: #a63e2a;\n  --gds-color-l1-content-primary: #d7d7d7;\n  --gds-color-l1-content-secondary: #ababab;\n  --gds-color-l1-content-tertiary: #1b1b1b;\n  --gds-color-l2-background-primary: #242424;\n  --gds-color-l2-background-secondary: #242424;\n  --gds-color-l2-background-tertiary: #d7d7d7;\n  --gds-color-l2-background-positive: #1d3f22;\n  --gds-color-l2-background-negative: #4a1c13;\n  --gds-color-l2-background-notice: #152c41;\n  --gds-color-l2-background-warning: #4c3212;\n  --gds-color-l2-background-information: #353535;\n  --gds-color-l2-background-copper-01: #f2efeb;\n  --gds-color-l2-background-copper-02: #332a18;\n  --gds-color-l2-background-purple-01: #f3eff7;\n  --gds-color-l2-background-purple-02: #372b40;\n  --gds-color-l2-background-green-01: #ecf6ed;\n  --gds-color-l2-background-green-02: #1d3f22;\n  --gds-color-l2-background-blue-01: #eaf0f7;\n  --gds-color-l2-background-blue-02: #152c41;\n  --gds-color-l2-content-primary: #d7d7d7;\n  --gds-color-l2-content-secondary: #ababab;\n  --gds-color-l2-content-tertiary: #1b1b1b;\n  --gds-color-l2-content-positive: #54b561;\n  --gds-color-l2-content-negative: #ee8375;\n  --gds-color-l2-content-warning: #f3b274;\n  --gds-color-l2-content-notice: #78a3d5;\n  --gds-color-l2-content-information: #d7d7d7;\n  --gds-color-l2-content-copper-01: #1b1b1b;\n  --gds-color-l2-content-copper-02: #ffffff;\n  --gds-color-l2-content-purple-01: #1b1b1b;\n  --gds-color-l2-content-purple-02: #ffffff;\n  --gds-color-l2-content-green-01: #1b1b1b;\n  --gds-color-l2-content-green-02: #ffffff;\n  --gds-color-l2-content-blue-01: #1b1b1b;\n  --gds-color-l2-content-blue-02: #ffffff;\n  --gds-color-l2-border-primary: #353535;\n  --gds-color-l2-border-secondary: #5e5e5e;\n  --gds-color-l2-border-tertiary: #2c2c2c;\n  --gds-color-l2-border-quarternary: #d7d7d7;\n  --gds-color-l2-border-inversed: #1b1b1b;\n  --gds-color-l3-background-primary: #d7d7d7;\n  --gds-color-l3-background-secondary: #353535;\n  --gds-color-l3-background-tertiary: #424242;\n  --gds-color-l3-background-quarternary: #0e0e0e;\n  --gds-color-l3-background-positive: #54b561;\n  --gds-color-l3-background-positive-secondary: #25512b;\n  --gds-color-l3-background-positive-badge: #306938;\n  --gds-color-l3-background-negative: #c04831;\n  --gds-color-l3-background-negative-secondary: #602418;\n  --gds-color-l3-background-negative-badge: #4A1C13;\n  --gds-color-l3-background-notice: #78a3d5;\n  --gds-color-l3-background-notice-secondary: #1A3853;\n  --gds-color-l3-background-notice-badge: #214769;\n  --gds-color-l3-background-warning: #f3b274;\n  --gds-color-l3-background-warning-secondary: #624017;\n  --gds-color-l3-background-warning-badge: #744C1B;\n  --gds-color-l3-background-information: #d7d7d7;\n  --gds-color-l3-background-information-secondary: #424242;\n  --gds-color-l3-background-information-badge: #616161;\n  --gds-color-l3-background-buy: #3571a6;\n  --gds-color-l3-background-copper-01: #e4ded5;\n  --gds-color-l3-background-copper-02: #42361f;\n  --gds-color-l3-background-purple-01: #e7deee;\n  --gds-color-l3-background-purple-02: #473752;\n  --gds-color-l3-background-green-01: #d7edd9;\n  --gds-color-l3-background-green-02: #25512b;\n  --gds-color-l3-background-blue-01: #d3dfef;\n  --gds-color-l3-background-blue-02: #1a3853;\n  --gds-color-l3-background-disabled: #181818;\n  --gds-color-l3-background-disabled-secondary: #1b1b1b;\n  --gds-color-l3-content-primary: #1b1b1b;\n  --gds-color-l3-content-secondary: #ababab;\n  --gds-color-l3-content-tertiary: #d7d7d7;\n  --gds-color-l3-content-notice: #78a3d5;\n  --gds-color-l3-content-warning: #f3b274;\n  --gds-color-l3-content-information: #d7d7d7;\n  --gds-color-l3-content-buy: #ffffff;\n  --gds-color-l3-content-copper-01: #1b1b1b;\n  --gds-color-l3-content-copper-02: #ffffff;\n  --gds-color-l3-content-purple-01: #1b1b1b;\n  --gds-color-l3-content-purple-02: #ffffff;\n  --gds-color-l3-content-green-01: #1b1b1b;\n  --gds-color-l3-content-green-02: #ffffff;\n  --gds-color-l3-content-blue-01: #1b1b1b;\n  --gds-color-l3-content-blue-02: #ffffff;\n  --gds-color-l3-content-disabled: #5e5e5e;\n  --gds-color-l3-content-positive: #54b561;\n  --gds-color-l3-content-negative: #ee8375;\n  --gds-color-l3-border-primary: #d7d7d7;\n  --gds-color-l3-border-secondary: #ababab;\n  --gds-color-l3-border-tertiary: #1b1b1b;\n  --gds-color-l3-border-negative: #ee8375;\n  --gds-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-color-l3-states-light-hover: #d7d7d7 10%;\n  --gds-color-l3-states-light-pressed: #d7d7d7 20%;\n  --gds-color-l3-states-positive-hover: #54b561 10%;\n  --gds-color-l3-states-positive-pressed: #54b561 20%;\n  --gds-color-l3-states-negative-hover: #ee8375 10%;\n  --gds-color-l3-states-negative-pressed: #ee8375 20%;\n";
 export default styles;

package/tokens/light.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\ncolor-scheme: light;\n  --gds-color-l1-background-primary: #ffffff;\n  --gds-color-l1-background-tertiary: #1b1b1b;\n  --gds-color-l1-background-secondary: #eeeeee;\n  --gds-color-l1-content-positive: #35723d;\n  --gds-color-l1-content-negative: #a63e2a;\n  --gds-color-l1-content-primary: #1b1b1b;\n  --gds-color-l1-content-secondary: #5e5e5e;\n  --gds-color-l1-content-tertiary: #ffffff;\n  --gds-color-l2-background-primary: #f3f3f3;\n  --gds-color-l2-background-secondary: #ffffff;\n  --gds-color-l2-background-tertiary: #242424;\n  --gds-color-l2-background-positive: #ecf6ed;\n  --gds-color-l2-background-negative: #fcecea;\n  --gds-color-l2-background-notice: #eaf0f7;\n  --gds-color-l2-background-warning: #fcecbc;\n  --gds-color-l2-background-information: #e2e2e2;\n  --gds-color-l2-background-copper-01: #f2efeb;\n  --gds-color-l2-background-copper-02: #332a18;\n  --gds-color-l2-background-purple-01: #f3eff7;\n  --gds-color-l2-background-purple-02: #372b40;\n  --gds-color-l2-background-green-01: #ecf6ed;\n  --gds-color-l2-background-green-02: #1d3f22;\n  --gds-color-l2-background-blue-01: #eaf0f7;\n  --gds-color-l2-background-blue-02: #152c41;\n  --gds-color-l2-content-primary: #1b1b1b;\n  --gds-color-l2-content-secondary: #5e5e5e;\n  --gds-color-l2-content-tertiary: #ffffff;\n  --gds-color-l2-content-positive: #35723d;\n  --gds-color-l2-content-negative: #a63e2a;\n  --gds-color-l2-content-warning: #65581e;\n  --gds-color-l2-content-notice: #005fac;\n  --gds-color-l2-content-information: #1b1b1b;\n  --gds-color-l2-content-copper-01: #1b1b1b;\n  --gds-color-l2-content-copper-02: #ffffff;\n  --gds-color-l2-content-purple-01: #1b1b1b;\n  --gds-color-l2-content-purple-02: #ffffff;\n  --gds-color-l2-content-green-01: #1b1b1b;\n  --gds-color-l2-content-green-02: #ffffff;\n  --gds-color-l2-content-blue-01: #1b1b1b;\n  --gds-color-l2-content-blue-02: #ffffff;\n  --gds-color-l2-border-primary: #d7d7d7;\n  --gds-color-l2-border-secondary: #6f6f6f;\n  --gds-color-l2-border-tertiary: #f9f9f9;\n  --gds-color-l2-border-quarternary: #1b1b1b;\n  --gds-color-l2-border-inversed: #ffffff;\n  --gds-color-l3-background-primary: #1b1b1b;\n  --gds-color-l3-background-secondary: #e2e2e2;\n  --gds-color-l3-background-tertiary: #d7d7d7;\n  --gds-color-l3-background-quarternary: #ffffff;\n  --gds-color-l3-background-positive: #35723d;\n  --gds-color-l3-background-positive-secondary: #d7edd9;\n  --gds-color-l3-background-positive-badge: #d7edd9;\n  --gds-color-l3-background-negative: #a63e2a;\n  --gds-color-l3-background-negative-secondary: #fcecea;\n  --gds-color-l3-background-negative-badge: #f8d6d3;\n  --gds-color-l3-background-notice: #005fac;\n  --gds-color-l3-background-notice-secondary: #d3dfef;\n  --gds-color-l3-background-notice-badge: #d3dfef;\n  --gds-color-l3-background-warning: #65581e;\n  --gds-color-l3-background-warning-secondary: #fadf7b;\n  --gds-color-l3-background-warning-badge: #fadf7b;\n  --gds-color-l3-background-information: #1b1b1b;\n  --gds-color-l3-background-information-secondary: #d7d7d7;\n  --gds-color-l3-background-information-badge: #d7d7d7;\n  --gds-color-l3-background-buy: #2e6290;\n  --gds-color-l3-background-copper-01: #e4ded5;\n  --gds-color-l3-background-copper-02: #42361f;\n  --gds-color-l3-background-purple-01: #e7deee;\n  --gds-color-l3-background-purple-02: #473752;\n  --gds-color-l3-background-green-01: #d7edd9;\n  --gds-color-l3-background-green-02: #25512b;\n  --gds-color-l3-background-blue-01: #d3dfef;\n  --gds-color-l3-background-blue-02: #1a3853;\n  --gds-color-l3-background-disabled: #f9f9f9;\n  --gds-color-l3-background-disabled-secondary: #f3f3f3;\n  --gds-color-l3-content-primary: #ffffff;\n  --gds-color-l3-content-secondary: #5e5e5e;\n  --gds-color-l3-content-tertiary: #1b1b1b;\n  --gds-color-l3-content-notice: #005fac;\n  --gds-color-l3-content-warning: #65581e;\n  --gds-color-l3-content-information: #1b1b1b;\n  --gds-color-l3-content-buy: #ffffff;\n  --gds-color-l3-content-copper-01: #1b1b1b;\n  --gds-color-l3-content-copper-02: #ffffff;\n  --gds-color-l3-content-purple-01: #1b1b1b;\n  --gds-color-l3-content-purple-02: #ffffff;\n  --gds-color-l3-content-green-01: #1b1b1b;\n  --gds-color-l3-content-green-02: #ffffff;\n  --gds-color-l3-content-blue-01: #1b1b1b;\n  --gds-color-l3-content-blue-02: #ffffff;\n  --gds-color-l3-content-disabled: #ababab;\n  --gds-color-l3-content-positive: #35723d;\n  --gds-color-l3-content-negative: #a63e2a;\n  --gds-color-l3-border-primary: #1b1b1b;\n  --gds-color-l3-border-secondary: #6f6f6f;\n  --gds-color-l3-border-tertiary: #d7d7d7;\n  --gds-color-l3-border-negative: #a63e2a;\n  --gds-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-color-l3-states-light-hover: #1b1b1b 10%;\n  --gds-color-l3-states-light-pressed: #1b1b1b 20%;\n  --gds-color-l3-states-positive-hover: #35723d 10%;\n  --gds-color-l3-states-positive-pressed: #35723d 20%;\n  --gds-color-l3-states-negative-hover: #a63e2a 10%;\n  --gds-color-l3-states-negative-pressed: #a63e2a 20%;\n";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 GMT\n */\n\ncolor-scheme: light;\n  --gds-color-l1-background-primary: #ffffff;\n  --gds-color-l1-background-tertiary: #1b1b1b;\n  --gds-color-l1-background-secondary: #eeeeee;\n  --gds-color-l1-content-positive: #35723d;\n  --gds-color-l1-content-negative: #a63e2a;\n  --gds-color-l1-content-primary: #1b1b1b;\n  --gds-color-l1-content-secondary: #5e5e5e;\n  --gds-color-l1-content-tertiary: #ffffff;\n  --gds-color-l2-background-primary: #f3f3f3;\n  --gds-color-l2-background-secondary: #ffffff;\n  --gds-color-l2-background-tertiary: #242424;\n  --gds-color-l2-background-positive: #ecf6ed;\n  --gds-color-l2-background-negative: #fcecea;\n  --gds-color-l2-background-notice: #eaf0f7;\n  --gds-color-l2-background-warning: #fcecbc;\n  --gds-color-l2-background-information: #e2e2e2;\n  --gds-color-l2-background-copper-01: #f2efeb;\n  --gds-color-l2-background-copper-02: #332a18;\n  --gds-color-l2-background-purple-01: #f3eff7;\n  --gds-color-l2-background-purple-02: #372b40;\n  --gds-color-l2-background-green-01: #ecf6ed;\n  --gds-color-l2-background-green-02: #1d3f22;\n  --gds-color-l2-background-blue-01: #eaf0f7;\n  --gds-color-l2-background-blue-02: #152c41;\n  --gds-color-l2-content-primary: #1b1b1b;\n  --gds-color-l2-content-secondary: #5e5e5e;\n  --gds-color-l2-content-tertiary: #ffffff;\n  --gds-color-l2-content-positive: #35723d;\n  --gds-color-l2-content-negative: #a63e2a;\n  --gds-color-l2-content-warning: #65581e;\n  --gds-color-l2-content-notice: #005fac;\n  --gds-color-l2-content-information: #1b1b1b;\n  --gds-color-l2-content-copper-01: #1b1b1b;\n  --gds-color-l2-content-copper-02: #ffffff;\n  --gds-color-l2-content-purple-01: #1b1b1b;\n  --gds-color-l2-content-purple-02: #ffffff;\n  --gds-color-l2-content-green-01: #1b1b1b;\n  --gds-color-l2-content-green-02: #ffffff;\n  --gds-color-l2-content-blue-01: #1b1b1b;\n  --gds-color-l2-content-blue-02: #ffffff;\n  --gds-color-l2-border-primary: #d7d7d7;\n  --gds-color-l2-border-secondary: #6f6f6f;\n  --gds-color-l2-border-tertiary: #f9f9f9;\n  --gds-color-l2-border-quarternary: #1b1b1b;\n  --gds-color-l2-border-inversed: #ffffff;\n  --gds-color-l3-background-primary: #1b1b1b;\n  --gds-color-l3-background-secondary: #e2e2e2;\n  --gds-color-l3-background-tertiary: #d7d7d7;\n  --gds-color-l3-background-quarternary: #ffffff;\n  --gds-color-l3-background-positive: #35723d;\n  --gds-color-l3-background-positive-secondary: #d7edd9;\n  --gds-color-l3-background-positive-badge: #d7edd9;\n  --gds-color-l3-background-negative: #a63e2a;\n  --gds-color-l3-background-negative-secondary: #fcecea;\n  --gds-color-l3-background-negative-badge: #f8d6d3;\n  --gds-color-l3-background-notice: #005fac;\n  --gds-color-l3-background-notice-secondary: #d3dfef;\n  --gds-color-l3-background-notice-badge: #d3dfef;\n  --gds-color-l3-background-warning: #65581e;\n  --gds-color-l3-background-warning-secondary: #fadf7b;\n  --gds-color-l3-background-warning-badge: #fadf7b;\n  --gds-color-l3-background-information: #1b1b1b;\n  --gds-color-l3-background-information-secondary: #d7d7d7;\n  --gds-color-l3-background-information-badge: #d7d7d7;\n  --gds-color-l3-background-buy: #2e6290;\n  --gds-color-l3-background-copper-01: #e4ded5;\n  --gds-color-l3-background-copper-02: #42361f;\n  --gds-color-l3-background-purple-01: #e7deee;\n  --gds-color-l3-background-purple-02: #473752;\n  --gds-color-l3-background-green-01: #d7edd9;\n  --gds-color-l3-background-green-02: #25512b;\n  --gds-color-l3-background-blue-01: #d3dfef;\n  --gds-color-l3-background-blue-02: #1a3853;\n  --gds-color-l3-background-disabled: #f9f9f9;\n  --gds-color-l3-background-disabled-secondary: #f3f3f3;\n  --gds-color-l3-content-primary: #ffffff;\n  --gds-color-l3-content-secondary: #5e5e5e;\n  --gds-color-l3-content-tertiary: #1b1b1b;\n  --gds-color-l3-content-notice: #005fac;\n  --gds-color-l3-content-warning: #65581e;\n  --gds-color-l3-content-information: #1b1b1b;\n  --gds-color-l3-content-buy: #ffffff;\n  --gds-color-l3-content-copper-01: #1b1b1b;\n  --gds-color-l3-content-copper-02: #ffffff;\n  --gds-color-l3-content-purple-01: #1b1b1b;\n  --gds-color-l3-content-purple-02: #ffffff;\n  --gds-color-l3-content-green-01: #1b1b1b;\n  --gds-color-l3-content-green-02: #ffffff;\n  --gds-color-l3-content-blue-01: #1b1b1b;\n  --gds-color-l3-content-blue-02: #ffffff;\n  --gds-color-l3-content-disabled: #ababab;\n  --gds-color-l3-content-positive: #35723d;\n  --gds-color-l3-content-negative: #a63e2a;\n  --gds-color-l3-border-primary: #1b1b1b;\n  --gds-color-l3-border-secondary: #6f6f6f;\n  --gds-color-l3-border-tertiary: #d7d7d7;\n  --gds-color-l3-border-negative: #a63e2a;\n  --gds-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-color-l3-states-light-hover: #1b1b1b 10%;\n  --gds-color-l3-states-light-pressed: #1b1b1b 20%;\n  --gds-color-l3-states-positive-hover: #35723d 10%;\n  --gds-color-l3-states-positive-pressed: #35723d 20%;\n  --gds-color-l3-states-negative-hover: #a63e2a 10%;\n  --gds-color-l3-states-negative-pressed: #a63e2a 20%;\n";
 export default styles;

package/tokens/motion.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n  --gds-sys-motion-duration-slowest: 1.5s;\n  --gds-sys-motion-duration-slow: 1s;\n  --gds-sys-motion-duration-default: .5s;\n  --gds-sys-motion-duration-fast: .4s;\n  --gds-sys-motion-duration-fastest: .2s;\n  --gds-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n  --gds-sys-motion-easing-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --gds-sys-motion-easing-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);\n  --gds-sys-motion-easing-ease-in: cubic-bezier(0.64, 0, 0.78, 0);\n}\n";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 GMT\n */\n\n:host {\n  --gds-sys-motion-duration-slowest: 1.5s;\n  --gds-sys-motion-duration-slow: 1s;\n  --gds-sys-motion-duration-default: .5s;\n  --gds-sys-motion-duration-fast: .4s;\n  --gds-sys-motion-duration-fastest: .2s;\n  --gds-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n  --gds-sys-motion-easing-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --gds-sys-motion-easing-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);\n  --gds-sys-motion-easing-ease-in: cubic-bezier(0.64, 0, 0.78, 0);\n}\n";
 export default styles;

package/tokens/shadow.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n--gds-shadow-xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);\n--gds-shadow-s: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n--gds-shadow-m: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);\n--gds-shadow-l: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);\n--gds-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);\n}\n";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 GMT\n */\n\n:host {\n--gds-shadow-xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);\n--gds-shadow-s: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n--gds-shadow-m: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);\n--gds-shadow-l: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);\n--gds-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);\n}\n";
 export default styles;

package/tokens/size.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n  --gds-space-max: 999px;\n  --gds-space-8xl: 120px;\n  --gds-space-7xl: 112px;\n  --gds-space-6xl: 96px;\n  --gds-space-5xl: 80px;\n  --gds-space-4xl: 64px;\n  --gds-space-3xl: 48px;\n  --gds-space-2xl: 40px;\n  --gds-space-xl: 32px;\n  --gds-space-l: 24px;\n  --gds-space-m: 16px;\n  --gds-space-s: 12px;\n  --gds-space-xs: 8px;\n  --gds-space-2xs: 4px;\n  --gds-space-3xs: 2px;\n  --gds-space-4xs: 1px;\n  --gds-space-0: 0px;\n}\n";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 GMT\n */\n\n:host {\n  --gds-space-max: 999px;\n  --gds-space-8xl: 120px;\n  --gds-space-7xl: 112px;\n  --gds-space-6xl: 96px;\n  --gds-space-5xl: 80px;\n  --gds-space-4xl: 64px;\n  --gds-space-3xl: 48px;\n  --gds-space-2xl: 40px;\n  --gds-space-xl: 32px;\n  --gds-space-l: 24px;\n  --gds-space-m: 16px;\n  --gds-space-s: 12px;\n  --gds-space-xs: 8px;\n  --gds-space-2xs: 4px;\n  --gds-space-3xs: 2px;\n  --gds-space-4xs: 1px;\n  --gds-space-0: 0px;\n}\n";
 export default styles;

package/tokens/text.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n  --gds-text-weight-bold: 700;\n  --gds-text-weight-medium: 500;\n  --gds-text-weight-book: 450;\n  --gds-text-weight-regular: 400;\n  --gds-text-weight-light: 300;\n  --gds-text-size-preamble-xs: 1rem;\n  --gds-text-size-preamble-s: 1.125rem;\n  --gds-text-size-preamble-m: 1.25rem;\n  --gds-text-size-preamble-l: 1.5rem;\n  --gds-text-size-preamble-xl: 1.75rem;\n  --gds-text-size-preamble-2xl: 2rem;\n  --gds-text-size-display-s: 2rem;\n  --gds-text-size-display-m: 2.25rem;\n  --gds-text-size-display-l: 3rem;\n  --gds-text-size-display-xl: 4rem;\n  --gds-text-size-display-2xl: 5.125rem;\n  --gds-text-size-body-s: 0.875rem;\n  --gds-text-size-body-m: 1rem;\n  --gds-text-size-body-l: 1.25rem;\n  --gds-text-size-detail-xs: 0.75rem;\n  --gds-text-size-detail-s: 0.875rem;\n  --gds-text-size-detail-m: 1rem;\n  --gds-text-size-heading-2xl: 0.875rem;\n  --gds-text-size-heading-2xs: 0.875rem;\n  --gds-text-size-heading-xs: 1rem;\n  --gds-text-size-heading-s: 1.25rem;\n  --gds-text-size-heading-m: 1.5rem;\n  --gds-text-size-heading-l: 1.75rem;\n  --gds-text-size-heading-xl: 2rem;\n  --gds-text-line-height-preamble-xs: 1.5rem;\n  --gds-text-line-height-preamble-s: 1.625rem;\n  --gds-text-line-height-preamble-m: 1.75rem;\n  --gds-text-line-height-preamble-l: 2rem;\n  --gds-text-line-height-preamble-xl: 2.25rem;\n  --gds-text-line-height-preamble-2xl: 2.5rem;\n  --gds-text-line-height-display-s: 2.5rem;\n  --gds-text-line-height-display-m: 2.75rem;\n  --gds-text-line-height-display-l: 3.5rem;\n  --gds-text-line-height-display-xl: 4.5rem;\n  --gds-text-line-height-display-2xl: 5.625rem;\n  --gds-text-line-height-body-s: 1.25rem;\n  --gds-text-line-height-body-m: 1.5rem;\n  --gds-text-line-height-body-l: 1.625rem;\n  --gds-text-line-height-detail-xs: 1rem;\n  --gds-text-line-height-detail-s: 1.125rem;\n  --gds-text-line-height-detail-m: 1.25rem;\n  --gds-text-line-height-heading-2xs: 1.25rem;\n  --gds-text-line-height-heading-xs: 1.5rem;\n  --gds-text-line-height-heading-s: 1.75rem;\n  --gds-text-line-height-heading-m: 2rem;\n  --gds-text-line-height-heading-l: 2.5rem;\n  --gds-text-line-height-heading-xl: 2.75rem;\n}\n";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 23 Apr 2025 12:41:39 GMT\n */\n\n:host {\n  --gds-text-weight-bold: 700;\n  --gds-text-weight-medium: 500;\n  --gds-text-weight-book: 450;\n  --gds-text-weight-regular: 400;\n  --gds-text-weight-light: 300;\n  --gds-text-size-preamble-xs: 1rem;\n  --gds-text-size-preamble-s: 1.125rem;\n  --gds-text-size-preamble-m: 1.25rem;\n  --gds-text-size-preamble-l: 1.5rem;\n  --gds-text-size-preamble-xl: 1.75rem;\n  --gds-text-size-preamble-2xl: 2rem;\n  --gds-text-size-display-s: 2rem;\n  --gds-text-size-display-m: 2.25rem;\n  --gds-text-size-display-l: 3rem;\n  --gds-text-size-display-xl: 4rem;\n  --gds-text-size-display-2xl: 5.125rem;\n  --gds-text-size-body-s: 0.875rem;\n  --gds-text-size-body-m: 1rem;\n  --gds-text-size-body-l: 1.25rem;\n  --gds-text-size-detail-xs: 0.75rem;\n  --gds-text-size-detail-s: 0.875rem;\n  --gds-text-size-detail-m: 1rem;\n  --gds-text-size-heading-2xl: 0.875rem;\n  --gds-text-size-heading-2xs: 0.875rem;\n  --gds-text-size-heading-xs: 1rem;\n  --gds-text-size-heading-s: 1.25rem;\n  --gds-text-size-heading-m: 1.5rem;\n  --gds-text-size-heading-l: 1.75rem;\n  --gds-text-size-heading-xl: 2rem;\n  --gds-text-line-height-preamble-xs: 1.5rem;\n  --gds-text-line-height-preamble-s: 1.625rem;\n  --gds-text-line-height-preamble-m: 1.75rem;\n  --gds-text-line-height-preamble-l: 2rem;\n  --gds-text-line-height-preamble-xl: 2.25rem;\n  --gds-text-line-height-preamble-2xl: 2.5rem;\n  --gds-text-line-height-display-s: 2.5rem;\n  --gds-text-line-height-display-m: 2.75rem;\n  --gds-text-line-height-display-l: 3.5rem;\n  --gds-text-line-height-display-xl: 4.5rem;\n  --gds-text-line-height-display-2xl: 5.625rem;\n  --gds-text-line-height-body-s: 1.25rem;\n  --gds-text-line-height-body-m: 1.5rem;\n  --gds-text-line-height-body-l: 1.625rem;\n  --gds-text-line-height-detail-xs: 1rem;\n  --gds-text-line-height-detail-s: 1.125rem;\n  --gds-text-line-height-detail-m: 1.25rem;\n  --gds-text-line-height-heading-2xs: 1.25rem;\n  --gds-text-line-height-heading-xs: 1.5rem;\n  --gds-text-line-height-heading-s: 1.75rem;\n  --gds-text-line-height-heading-m: 2rem;\n  --gds-text-line-height-heading-l: 2.5rem;\n  --gds-text-line-height-heading-xl: 2.75rem;\n}\n";
 export default styles;

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-304b4b";
+const VER_SUFFIX = "-810138";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])