@sebgroup/green-core 1.75.0 → 1.76.1

package/components/button/button.component.d.ts

@@ -10,6 +10,10 @@ declare class Button extends GdsFormControlElement<any> {
      * Whether the button is disabled.
      */
     disabled: boolean;
+    /**
+     * Spread the contents of the button
+     */
+    'justify-content'?: string;
     /**
      * The type of the button.
      */

package/components/button/button.component.js

@@ -16,6 +16,7 @@ import { html as customElementHtml, gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { observeLightDOM } from "../../utils/decorators/index.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import { forwardAttributes } from "../../utils/directives/index.js";
 import { stripWhitespace } from "../../utils/helpers/strip-white-space.js";
 import {
@@ -139,6 +140,11 @@ Button.shadowRootOptions = {
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Button.prototype, "disabled", 2);
+__decorateClass([
+  styleExpressionProperty({
+    selector: ".button"
+  })
+], Button.prototype, "justify-content", 2);
 __decorateClass([
   property({ reflect: true })
 ], Button.prototype, "type", 2);

package/components/button/button.style.css.js

@@ -1,2 +1,2 @@
-const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-color-l3-background-primary);\n    color: var(--gds-color-l3-content-primary);\n    border-radius: var(--gds-space-max);\n    font-family: inherit;\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n    font-weight: var(--gds-text-weight-book);\n    gap: var(--gds-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-space-3xs);\n    padding-block: var(--gds-space-s);\n    padding-inline: var(--gds-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-primary),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-primary),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n/* High specificity */\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-color-l3-background-disabled);\n  color: var(--gds-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-color-l3-background-secondary);\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-secondary),\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-secondary),\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-space-l);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-space-xl);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-space-2xl);\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-positive),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-positive-secondary);\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-positive-secondary),\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive-secondary),\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-negative),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-negative-secondary);\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-negative-secondary),\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative-secondary),\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
+const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-color-l3-background-primary);\n    color: var(--gds-color-l3-content-primary);\n    border-radius: var(--gds-space-max);\n    font-family: inherit;\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n    font-weight: var(--gds-text-weight-book);\n    gap: var(--gds-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-space-3xs);\n    padding-block: var(--gds-space-s);\n    padding-inline: var(--gds-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-primary),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-primary),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-color-l3-background-disabled);\n  color: var(--gds-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-color-l3-background-secondary);\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-secondary),\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-secondary),\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-space-l);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-space-xl);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-space-2xl);\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-positive),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-positive-secondary);\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-positive-secondary),\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive-secondary),\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-negative),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-negative-secondary);\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-negative-secondary),\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative-secondary),\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
 export default styles;

package/components/link/link.component.d.ts

@@ -27,6 +27,25 @@ export declare class GdsLink extends GdsLink_base {
      * The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to "noreferrer noopener" for security reasons when target is set.
      */
     rel?: string;
+    /**
+     * Provides an accessible name for the link that will be read by screen readers.
+     * Use this when:
+     * - The link contains only an icon
+     * - The visual text needs a different description for screen readers
+     * - Additional context is needed for accessibility
+     *
+     * @example
+     * // Icon-only link
+     * <gds-link href="/settings" label="Open settings">
+     *   <gds-icon-settings></gds-icon-settings>
+     * </gds-link>
+     *
+     * // Different screen reader text
+     * <gds-link href="/article" label="Read full article about climate change">
+     *   Read more
+     * </gds-link>
+     */
+    label: string;
     /**
      * Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present.
      */
@@ -42,7 +61,7 @@ export declare class GdsLink extends GdsLink_base {
      * @property text-decoration
      */
     'text-decoration'?: string;
-    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult;
 }
 export {};

package/components/link/link.component.js

@@ -4,7 +4,7 @@ import {
   __privateGet
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _defaultRel, defaultRel_get;
-import { unsafeCSS } from "lit";
+import { nothing, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { html as staticHtml } from "lit/static-html.js";
@@ -22,9 +22,14 @@ let GdsLink = class extends withMarginProps(
   withSizeXProps(withLayoutChildProps(GdsElement))
 ) {
   constructor() {
-    super();
+    super(...arguments);
     __privateAdd(this, _defaultRel);
     this.href = "";
+    this.label = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
   }
   render() {
     return staticHtml`
@@ -33,6 +38,7 @@ let GdsLink = class extends withMarginProps(
         target=${ifDefined(this.target)}
         rel=${ifDefined(this.rel || __privateGet(this, _defaultRel, defaultRel_get))}
         download=${ifDefined(this.download)}
+        aria-label=${this.label || nothing}
       >
         <slot name="lead"></slot>
         <slot></slot>
@@ -59,6 +65,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsLink.prototype, "rel", 2);
+__decorateClass([
+  property()
+], GdsLink.prototype, "label", 2);
 __decorateClass([
   property()
 ], GdsLink.prototype, "download", 2);

package/components/sensitive/account/index.d.ts

@@ -0,0 +1 @@
+export * from './sensitive-account';

package/components/sensitive/account/index.js

@@ -0,0 +1 @@
+export * from "./sensitive-account.js";

package/components/sensitive/account/sensitive-account.component.d.ts

@@ -0,0 +1,26 @@
+import { GdsFormattedAccount } from '../../formatted-text/account/formatted-account.component';
+/**
+ * @element gds-sensitive-account
+ *
+ * @status beta
+ *
+ * [Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitiv/account)
+ *
+ * GdsSensitiveAccount is used to display accounts that need to be hidden
+ *
+ * The component renders the formatted account and conditionally hides it based on the `hide` property.
+ *
+ * @example
+ * <gds-sensitive-account
+ *   hide
+ *   account="54400023423">
+ * </gds-sensitive-account>
+ */
+export declare class GdsSensitiveAccount extends GdsFormattedAccount {
+    /**
+     * When true, hides the sensitive account.
+     * @default false
+     */
+    hide: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import { GdsBlur } from "../../blur/blur.component.js";
+import { GdsFormattedAccount } from "../../formatted-text/account/formatted-account.component.js";
+let GdsSensitiveAccount = class extends GdsFormattedAccount {
+  constructor() {
+    super(...arguments);
+    this.hide = false;
+  }
+  render() {
+    return when(
+      this.hide,
+      () => html`<gds-blur>${super.render()}</gds-blur>`,
+      () => super.render()
+    );
+  }
+};
+__decorateClass([
+  property({ type: Boolean })
+], GdsSensitiveAccount.prototype, "hide", 2);
+GdsSensitiveAccount = __decorateClass([
+  gdsCustomElement("gds-sensitive-account", { dependsOn: [GdsBlur] })
+], GdsSensitiveAccount);
+export {
+  GdsSensitiveAccount
+};

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

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

package/components/sensitive/account/sensitive-account.js

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

package/components/sensitive/date/index.d.ts

@@ -0,0 +1 @@
+export * from './sensitive-date';

package/components/sensitive/date/index.js

@@ -0,0 +1 @@
+export * from "./sensitive-date.js";

package/components/sensitive/date/sensitive-date.component.d.ts

@@ -0,0 +1,27 @@
+import { GdsFormattedDate } from '../../formatted-text/date/formatted-date.component';
+/**
+ * @element gds-sensitive-date
+ *
+ * @status beta
+ *
+ * [Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)
+ *
+ * GdsSensitiveDate is used to display dates that need to be hidden
+ *
+ * The component renders the formatted date and conditionally hides it based on the `hide` property.
+ *
+ * @example
+ * <gds-sensitive-date
+ *   hide
+ *   value="2025/1/1"
+ *   locale="sv-SE">
+ * </gds-sensitive-date>
+ */
+export declare class GdsSensitiveDate extends GdsFormattedDate {
+    /**
+     * When true, hides the sensitive date.
+     * @default false
+     */
+    hide: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.QTSIPXV3.js";
+import { property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import { GdsBlur } from "../../blur/blur.component.js";
+import { GdsFormattedDate } from "../../formatted-text/date/formatted-date.component.js";
+let GdsSensitiveDate = class extends GdsFormattedDate {
+  constructor() {
+    super(...arguments);
+    this.hide = false;
+  }
+  render() {
+    return when(
+      this.hide,
+      () => html`<gds-blur>${super.render()}</gds-blur>`,
+      () => super.render()
+    );
+  }
+};
+__decorateClass([
+  property({ type: Boolean })
+], GdsSensitiveDate.prototype, "hide", 2);
+GdsSensitiveDate = __decorateClass([
+  gdsCustomElement("gds-sensitive-date", { dependsOn: [GdsBlur] })
+], GdsSensitiveDate);
+export {
+  GdsSensitiveDate
+};

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

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

package/components/sensitive/date/sensitive-date.js

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

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 Mon, 14 Apr 2025 15:36:17 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 14 Apr 2025 15:36: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, 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}";
 export default styles;

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

@@ -18,6 +18,7 @@ export declare const GdsButton: (props: React.ComponentProps<ReturnType<typeof g
     'grid-area'?: string | undefined;
     flex?: string | undefined;
     disabled?: boolean | undefined;
+    'justify-content'?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     rank?: "primary" | "secondary" | "tertiary" | undefined;
     variant?: "neutral" | "positive" | "negative" | undefined;

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

@@ -22,6 +22,7 @@ export declare const GdsFab: (props: React.ComponentProps<ReturnType<typeof getR
     'grid-area'?: string | undefined;
     flex?: string | undefined;
     disabled?: boolean | undefined;
+    'justify-content'?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     rank?: "primary" | "secondary" | "tertiary" | undefined;
     variant?: "neutral" | "positive" | "negative" | 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 './calendar/index.js';
 export * from './card/index.js';
+export * from './calendar/index.js';
 export * from './coachmark/index.js';
 export * from './container/index.js';
 export * from './context-menu/index.js';
@@ -46,6 +46,11 @@ 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';
@@ -333,6 +338,3 @@ 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-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 "./calendar/index.js";
 export * from "./card/index.js";
+export * from "./calendar/index.js";
 export * from "./coachmark/index.js";
 export * from "./container/index.js";
 export * from "./context-menu/index.js";
@@ -46,6 +46,11 @@ 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";
@@ -333,6 +338,3 @@ 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-number/index.js";

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

@@ -4,8 +4,10 @@ export declare const GdsLink: (props: React.ComponentProps<ReturnType<typeof get
     href?: string | undefined;
     target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
     rel?: string | undefined;
+    label?: string | undefined;
     download?: string | undefined;
     'text-decoration'?: string | undefined;
+    connectedCallback?: (() => void) | undefined;
     render?: (() => import("lit-html").TemplateResult) | undefined;
     margin?: string | undefined;
     'margin-inline'?: string | undefined;
@@ -26,7 +28,6 @@ export declare const GdsLink: (props: React.ComponentProps<ReturnType<typeof get
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     readonly renderOptions?: import("lit-html").RenderOptions | undefined;
     readonly renderRoot?: HTMLElement | DocumentFragment | undefined;