@sebgroup/green-core 1.69.4 → 1.70.1

package/chunks/chunk.T4D3GD4D.js

@@ -1,2376 +0,0 @@
-import {
-  tokens
-} from "./chunk.HEZEUVHT.js";
-import {
-  VER_SUFFIX
-} from "./chunk.QK3R23GV.js";
-import {
-  supportsConstructedStylesheets
-} from "./chunk.B7ZOSVCQ.js";
-import {
-  __privateAdd,
-  __privateGet,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.SEHSDSX2.js";
-
-// libs/core/src/utils/transitional-styles/transitional-styles.ts
-import { unsafeCSS } from "lit";
-
-// libs/core/src/primitives/menu/menu-heading.trans.styles.scss?inline
-var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host {
-    background-color: var(--gds-ref-pallet-base300);
-    color: var(--gds-ref-pallet-base800);
-    display: flex;
-    font-size: 0.875rem;
-    font-weight: 500;
-    padding: 0.75rem 1rem;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-  :host([aria-hidden=true]) {
-    display: none;
-  }
-}`;
-
-// libs/core/src/primitives/listbox/listbox.trans.styles.scss?inline
-var listbox_trans_styles_default = `/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-/** 
-  * @deprecated in favor of Grouped list component
-  */
-/** 
-  * @deprecated in favor of Grouped list component
-  */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host {
-    padding-left: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    overflow-y: auto;
-  }
-  :host > li {
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
-    border: 0;
-    display: block;
-    position: relative;
-  }
-  :host > li::before {
-    font-weight: 500;
-    display: inline-block;
-    left: 0;
-    position: absolute;
-    text-align: center;
-  }
-}`;
-
-// libs/core/src/primitives/listbox/option.trans.styles.scss?inline
-var option_trans_styles_default = `/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host div {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-    line-height: 1.25;
-    cursor: pointer;
-    display: flex;
-    gap: 0.75rem;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-  :host div:hover, :host div:focus-visible {
-    background-color: var(--grey-400);
-  }
-  :host div:active {
-    background-color: var(--grey-400);
-  }
-  :host div:focus {
-    outline-color: #000;
-    outline-offset: -0.25rem;
-  }
-  :host div.active.sg-highlighted, :host div[aria-selected=true] {
-    background: var(--grey-1000);
-    color: #fff;
-  }
-  :host(:hover) div,
-  :host(:focus-visible) div {
-    background-color: var(--grey-400);
-  }
-  :host(:active) div {
-    background-color: var(--grey-500);
-  }
-  :host(:focus-visible) {
-    outline-color: #000;
-    outline-offset: -0.25rem;
-  }
-  :host([inert]) {
-    display: none;
-  }
-  :host([highlighted]) div {
-    background: var(--grey-1000);
-    color: #fff;
-  }
-  .checkbox {
-    background-color: var(--gds-comp-checkbox-container-color);
-    border-radius: var(--gds-comp-checkbox-border-radius);
-    box-shadow: inset 0 0 0 1px var(--gds-comp-checkbox-border-color);
-    flex: 0 0 auto;
-    flex-shrink: 0;
-    height: var(--gds-comp-checkbox-container-width);
-    margin-top: 0.15rem;
-    position: relative;
-    width: var(--gds-comp-checkbox-container-width);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .checkbox [gds-element=gds-icon-checkmark]::part(icon) {
-    width: 10px;
-    height: 10px;
-  }
-  .checkbox.checked {
-    background-color: var(--gds-comp-checkbox-container-color-selected);
-  }
-  .checkbox.checked [gds-element=gds-icon-checkmark]::part(icon) {
-    color: var(--gds-comp-checkbox-border-color-selected, #fff);
-  }
-}`;
-
-// libs/core/src/primitives/listbox/listbox.trans.styles.ts
-function register() {
-  TransitionalStyles.instance.register("gds-listbox", listbox_trans_styles_default.toString());
-  TransitionalStyles.instance.register("gds-option", option_trans_styles_default.toString());
-  TransitionalStyles.instance.register(
-    "gds-menu-heading",
-    menu_heading_trans_styles_default.toString()
-  );
-}
-
-// libs/core/src/components/popover/popover.trans.styles.scss?inline
-var popover_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host {
-    display: contents;
-  }
-  :host([open]) dialog {
-    box-sizing: border-box;
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-  :host > div:not([hidden]) {
-    display: contents;
-  }
-  header {
-    display: flex;
-  }
-  header .close::part(_button) {
-    border-radius: 100%;
-    color: var(--text-primary-color);
-    border: 1px solid transparent;
-  }
-  header .close::part(_button):hover {
-    background-color: var(--grey-500);
-  }
-  header h2 {
-    flex-grow: 1;
-    font-weight: 400;
-    line-height: 1.5;
-    margin: 0.25rem 0 0 0.75rem;
-  }
-  dialog {
-    --z-index: var(--sg-z-index-popover);
-    background-color: var(--sg-popover-background);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    inset: auto;
-    z-index: var(--z-index);
-    box-shadow: var(--sg-popover-box-shadow);
-    color: var(--text-primary-color);
-    overflow: hidden;
-    padding: 0;
-    padding-bottom: 0;
-    border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--text-primary-color);
-    --sg-border-color: var(--text-primary-color);
-    border-radius: var(--sg-border-radius);
-  }
-  @media (max-width: 35.98em) {
-    dialog.use-modal-in-mobile {
-      border-top: solid var(--sg-border-width) var(--sg-border-color);
-      --border-color: var(--sg-border-color);
-      padding-bottom: 0.5rem;
-      border-radius: 1rem 1rem 0 0;
-      bottom: 0;
-      left: 0;
-      transition: all 300ms ease-in-out;
-      width: 100%;
-      border: 1px solid var(--border-color);
-      border-radius: 0.25rem;
-      max-height: 80svh;
-      padding-bottom: 0;
-      inset: 0;
-    }
-    dialog.use-modal-in-mobile.v-kb-visible {
-      inset-block-end: auto;
-      max-height: 50svh;
-      top: 1rem;
-    }
-  }
-  @media (min-width: 36em) {
-    dialog.use-modal-in-mobile header {
-      display: none;
-    }
-  }
-  @media (min-width: 36em) {
-    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {
-      opacity: 0;
-    }
-  }
-  dialog::backdrop {
-    background-color: rgba(0, 0, 0, 0.2);
-    display: block;
-    position: fixed;
-  }
-  dialog:not(.use-modal-in-mobile) header {
-    display: none;
-  }
-  dialog:not(.use-modal-in-mobile)::backdrop {
-    opacity: 0;
-  }
-}`;
-
-// libs/core/src/components/popover/popover.trans.styles.ts
-function register2() {
-  TransitionalStyles.instance.register("gds-popover", popover_trans_styles_default.toString());
-}
-var popover_trans_styles_default2 = register2;
-
-// libs/core/src/components/context-menu/context-menu.trans.styles.scss?inline
-var context_menu_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-i.sg-icon {
-  font-size: 0;
-  width: 1rem;
-  height: 1rem;
-  display: inline-block;
-}
-i.sg-icon::before {
-  content: "";
-  display: inline-block;
-  background: var(--color);
-  width: 100%;
-  height: 100%;
-  -webkit-mask-repeat: no-repeat;
-          mask-repeat: no-repeat;
-}
-i.sg-icon.sg-icon-calendar::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-calendar-range::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-ellipsis::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-grip-vertical::before {
-  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-next::before {
-  background: none;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-left: -10px;
-  margin-top: 2px;
-  transform: translate(75%) rotate(-135deg) scaleZ(-1);
-  transition: transform 0.3s ease-in;
-  width: 12px;
-}
-i.sg-icon.sg-icon-previous::before {
-  background: none;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-left: -4px;
-  margin-top: 2px;
-  transform: translate(75%) rotate(45deg) scaleZ(-1);
-  transition: transform 0.3s ease-in;
-  width: 12px;
-}
-i.sg-icon.sg-icon-ellipsis::before {
-  margin-right: -2px;
-}
-
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _overrides;
-  :host {
-    display: inline-block;
-  }
-  @layer _base {
-    button {
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      font-family: inherit;
-      padding: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      padding-bottom: 0.75rem;
-      padding-top: 0.75rem;
-      border-radius: var(--sg-border-radius);
-      border: solid var(--sg-border-width) var(--sg-border-color);
-      font-weight: 500;
-      min-height: 2.75rem;
-      align-items: center;
-      display: inline-flex;
-      justify-content: center;
-      background-color: transparent;
-      border: 0.0625rem solid transparent;
-      padding: 0.625rem;
-      height: 2.75rem;
-      width: 2.75rem;
-      min-width: auto;
-      --color: var(--gds-ref-pallet-base800);
-    }
-    button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    button:focus, button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    @media (max-width: 35.98em) {
-      button {
-        min-width: 100%;
-      }
-    }
-    @media screen and (-ms-high-contrast: active) {
-      button {
-        border: 2px solid currentcolor;
-      }
-    }
-    button.small {
-      min-height: 2rem;
-      padding: 0.4375rem 0.75rem;
-      line-height: 1rem;
-    }
-    button.large {
-      min-height: 4rem;
-      padding: 1rem 1.5rem;
-      font-size: 1.5rem;
-      line-height: 2rem;
-    }
-    .form-group button {
-      margin-top: -0.625rem;
-    }
-    button.small {
-      height: 2rem;
-      width: 2rem;
-      padding: 0.4375rem;
-      line-height: 1.125rem;
-    }
-    button svg {
-      height: 1rem;
-      width: 1rem;
-    }
-    button path,
-    button line,
-    button circle,
-    button rect,
-    button ellipse,
-    button polyline,
-    button text {
-      fill: var(--gds-ref-pallet-base800);
-      stroke: var(--gds-ref-pallet-base800);
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    }
-    button:hover, button.highlighted {
-      background-color: rgba(0, 0, 0, 0.1);
-      border-color: transparent;
-    }
-    button:active, button.highlighted:hover {
-      background-color: rgba(0, 0, 0, 0.2);
-      border-color: transparent;
-    }
-  }
-  @layer _overrides {
-    button {
-      border-color: transparent;
-      color: var(--gds-ref-pallet-base800);
-      display: flex;
-      gap: 0.5rem;
-      line-height: 0.75;
-      padding-inline: 0.4375rem;
-      width: auto;
-    }
-    button.highlighted {
-      background-color: var(--gds-ref-pallet-base300);
-    }
-  }
-}`;
-
-// libs/core/src/components/context-menu/context-menu.trans.styles.ts
-function register3() {
-  TransitionalStyles.instance.register("gds-context-menu", context_menu_trans_styles_default.toString());
-  register2();
-  register();
-}
-var context_menu_trans_styles_default2 = register3;
-
-// libs/core/src/components/calendar/calendar.trans.styles.scss?inline
-var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-/* medium */
-/* regular */
-/* regular */
-/* regular */
-/* hover */
-/* focus */
-/* selected */
-/* highlighted */
-/* active */
-/* disabled */
-/* today */
-/* weekend */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base {
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    @media (max-width: 35.98em) {
-      :host {
-        flex-wrap: wrap;
-        overflow-y: auto;
-      }
-    }
-    :host table {
-      border-spacing: 0;
-    }
-    :host th,
-    :host td {
-      box-sizing: border-box;
-      height: 2.75rem;
-      text-align: center;
-      width: 2.75rem;
-    }
-    :host thead {
-      /* days */
-    }
-    :host thead th {
-      background: var(--sg-bg-level-2);
-      border-bottom: solid 1px var(--sg-grey-300);
-      font-weight: 400;
-      top: 0;
-    }
-    @media (max-width: 35.98em) {
-      :host thead th {
-        position: sticky;
-      }
-    }
-    :host tbody {
-      /* week numbers */
-      /* dates */
-    }
-    :host tbody th {
-      font-weight: 400;
-    }
-    :host tbody td {
-      border: solid 1px transparent;
-      font-weight: 500;
-      -webkit-user-select: none;
-         -moz-user-select: none;
-              user-select: none;
-      /* weekend */
-      /* today */
-      /* hover */
-      /* focus */
-      /* selected */
-      /* highlighted */
-      /* active (pressed) */
-      /* disabled */
-    }
-    :host tbody td.sg-date-holiday:not(.disabled) {
-      background: var(--sg-bg-level-2);
-      color: hsl(var(--sg-hsl-red-2));
-    }
-    :host tbody td.today {
-      background: transparent;
-      border-radius: 4px;
-      box-shadow: inset 0 0 0 2px var(--grey-1000);
-      color: var(--grey-1000);
-    }
-    :host tbody td:hover:not(.disabled) {
-      background: var(--grey-500);
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: var(--gds-sys-color-font);
-      cursor: pointer;
-    }
-    :host tbody td:focus-visible:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    :host tbody td:focus-visible:not(.disabled) {
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      cursor: pointer;
-      position: relative;
-      z-index: 0;
-    }
-    :host tbody td[aria-selected=true] {
-      background: var(--grey-1000);
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
-    }
-    :host tbody td[tabindex="0"] {
-      border-radius: 4px;
-    }
-    :host tbody td:hover:active:not(.disabled) {
-      background: var(--grey-1000);
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
-    }
-    :host tbody td.disabled {
-      background: hsl(var(--sg-hsl-disabled-background));
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: hsl(var(--sg-hsl-disabled-color));
-      cursor: not-allowed;
-      font-weight: 400;
-    }
-    :host tbody td.disabled.sg-date-holiday {
-      color: hsla(var(--sg-hsl-red-2), 0.25);
-    }
-    :host tbody td.disabled .number,
-    :host tbody td.disabled .indicator-dot {
-      --_color: hsl(var(--sg-hsl-disabled-color)) !important;
-    }
-    :host tbody td.custom-date {
-      position: relative;
-    }
-    :host tbody .number {
-      color: var(--_color, "currentColor");
-    }
-    :host tbody .indicator-dot {
-      display: block;
-      width: 0.375rem;
-      height: 0.375rem;
-      top: 1.5rem;
-      border-radius: 50%;
-      margin: auto;
-      position: absolute;
-      inset-block-end: 0.125rem;
-      inset-inline: 0;
-      background-color: var(--_color);
-    }
-    :host table {
-      flex-grow: 1;
-      width: 100%;
-    }
-    :host table td {
-      width: 3rem;
-      height: 3rem;
-    }
-  }
-  @layer _modifiers {
-    .week-number {
-      border-right: solid 1px var(--gds-ref-pallet-base300);
-      font-weight: 400;
-      pointer-events: none;
-    }
-  }
-}`;
-
-// libs/core/src/components/calendar/calendar.trans.styles.ts
-function register4() {
-  TransitionalStyles.instance.register("gds-calendar", calendar_trans_styles_default.toString());
-}
-var calendar_trans_styles_default2 = register4;
-
-// libs/core/src/primitives/field-base/field-base.trans.styles.scss?inline
-var field_base_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  .field {
-    border-radius: var(--sg-border-radius);
-    border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--sg-border-color);
-    align-items: stretch;
-    gap: var(--gds-space-xs);
-    background-color: var(--sg-form-control-bg);
-    box-sizing: border-box;
-    color: var(--sg-text-primary);
-    cursor: text;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs) calc(var(--gds-space-xs) - 1px) var(--gds-space-m);
-    min-block-size: 44px;
-  }
-  .field:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-  .field:focus, .field:focus-within {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
-  }
-  .field:hover {
-    background-color: var(--grey-200);
-  }
-  .field.small {
-    font-size: 0.875rem;
-    min-height: 2rem;
-  }
-  .field.multiline {
-    align-items: flex-start;
-    padding: calc(var(--gds-space-s) - 1px) var(--gds-space-s) calc(var(--gds-space-s) - 1px) var(--gds-space-m);
-    height: -moz-max-content;
-    height: max-content;
-  }
-  .field.action-slot-occupied:not(.trail-slot-occupied) {
-    padding-right: var(--gds-space-xs);
-  }
-  .field.lead-slot-occupied {
-    padding-left: var(--gds-space-xs);
-  }
-  .field.trail-slot-occupied {
-    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-m);
-  }
-  .field slot[name=action]::slotted(*) {
-    margin: -3px 0 -3px -3px;
-  }
-  .field:focus-within {
-    outline-color: currentColor;
-  }
-  .field.invalid {
-    border-color: var(--gds-color-l3-border-negative);
-    color: var(--gds-color-l3-content-negative);
-    border-bottom-width: 2px;
-  }
-  .field.disabled {
-    background: var(--gds-color-l3-background-disabled);
-    color: var(--gds-color-l3-content-disabled);
-    border-color: transparent;
-    pointer-events: none;
-  }
-  .main-slot-wrap {
-    display: flex;
-    flex: 1;
-  }
-  slot:not([name])::slotted(*) {
-    color: currentColor;
-  }
-  slot[name=lead]::slotted([gds-element^=gds-icon-]) {
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    min-width: var(--gds-space-l);
-  }
-}`;
-
-// libs/core/src/primitives/field-base/field-base.trans.styles.ts
-function register5() {
-  TransitionalStyles.instance.register("gds-field-base", field_base_trans_styles_default.toString());
-}
-
-// libs/core/src/components/dropdown/dropdown.trans.styles.ts
-function register7() {
-  register();
-  register2();
-  register6();
-  register5();
-}
-var dropdown_trans_styles_default = register7;
-
-// libs/core/src/components/datepicker/datepicker.trans.styles.scss?inline
-var datepicker_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    contain: layout;
-    isolation: isolate;
-    gap: var(--gds-space-xs);
-  }
-  [role=spinbutton] {
-    display: inline-block;
-  }
-  [role=spinbutton]:focus {
-    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
-    outline: none;
-  }
-  [role=spinbutton]::-moz-selection {
-    background: transparent;
-  }
-  [role=spinbutton]::selection {
-    background: transparent;
-  }
-}`;
-
-// libs/core/src/components/datepicker/datepicker.trans.styles.ts
-function register8() {
-  const tokensAndStyles = datepicker_trans_styles_default.toString() + tokens.reduce((acc, token) => acc + token.cssText, "");
-  TransitionalStyles.instance.register(
-    "gds-datepicker",
-    tokensAndStyles.toString()
-  );
-  register7();
-  register2();
-  register4();
-}
-var datepicker_trans_styles_default2 = register8;
-
-// libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.scss?inline
-var filter_chip_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _overrides;
-  @layer _base {
-    .btn-p {
-      padding: 0 0.75rem;
-    }
-    .icon {
-      width: 1rem;
-    }
-  }
-}`;
-
-// libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts
-function register9() {
-  TransitionalStyles.instance.register("gds-filter-chip", filter_chip_trans_styles_default.toString());
-  register6();
-}
-var filter_chip_trans_styles_default2 = register9;
-
-// libs/core/src/components/filter-chips/filter-chips.trans.styles.scss?inline
-var filter_chips_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _overrides;
-  @layer _base {}
-  @layer _overrides {}
-}`;
-
-// libs/core/src/components/filter-chips/filter-chips.trans.styles.ts
-function register10() {
-  TransitionalStyles.instance.register("gds-filter-chips", filter_chips_trans_styles_default.toString());
-  register9();
-}
-var filter_chips_trans_styles_default2 = register10;
-
-// libs/core/src/components/grouped-list/grouped-list.trans.styles.scss?inline
-var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _overrides;
-  :host {
-    display: block;
-    list-style: none;
-  }
-  @layer _base {
-    .gds-list-heading {
-      background-color: var(--gds-ref-pallet-base200, #e9e9e9);
-      font-size: 0.875rem;
-      font-weight: 500;
-      padding: 0.5rem 1rem;
-    }
-    ::slotted([gds-element=gds-list-item]) {
-      all: revert;
-      border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);
-      display: flex;
-      gap: 0.25rem;
-      justify-content: space-between;
-      padding: 1rem;
-    }
-  }
-}`;
-
-// libs/core/src/components/grouped-list/grouped-list.trans.styles.ts
-function register11() {
-  TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
-}
-var grouped_list_trans_styles_default2 = register11;
-
-// libs/core/src/components/input/input.trans.styles.ts
-function register12() {
-  register6();
-  register5();
-}
-var input_trans_styles_default = register12;
-
-// libs/core/src/components/segmented-control/segment/segment.trans.styles.scss?inline
-var segment_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base;
-  @layer _base {
-    :host {
-      border-right: 1px solid #333;
-      box-sizing: border-box;
-      display: flex;
-      transition: 0.2s;
-      z-index: 1;
-    }
-    :host(:last-child) {
-      border-right: 0;
-    }
-    button {
-      -webkit-appearance: none;
-         -moz-appearance: none;
-              appearance: none;
-      background: transparent;
-      border-width: 0;
-      color: var(--text-primary-color);
-      cursor: pointer;
-      flex-grow: 1;
-      flex-shrink: 0;
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: 500;
-      min-width: 6.625rem;
-      overflow: hidden;
-      padding: 0 1rem;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-      border-radius: 0;
-    }
-    @media (pointer: fine) {
-      button:hover {
-        background-color: var(--grey-400);
-      }
-    }
-    button[aria-current=true] {
-      background-color: #333;
-      color: #fff;
-    }
-    button:focus-visible {
-      outline: 2px solid #000;
-      outline-offset: -2px;
-    }
-    button:disabled,
-    button[aria-disabled=true],
-    button.disabled {
-      color: var(--text-disabled-color) !important;
-      border-color: var(--border-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    button:disabled::placeholder,
-    button[aria-disabled=true]::placeholder,
-    button.disabled::placeholder {
-      color: var(--text-disabled-color);
-    }
-  }
-}`;
-
-// libs/core/src/components/segmented-control/segment/segment.trans.styles.ts
-function register13() {
-  TransitionalStyles.instance.register("gds-segmented", segment_trans_styles_default.toString());
-}
-var segment_trans_styles_default2 = register13;
-
-// libs/core/src/components/segmented-control/segmented-control.trans.styles.css?inline
-var segmented_control_trans_styles_default = `@layer base, reset, transitional-styles;
-
-@layer transitional-styles {
-  @layer _base, _overrides;
-
-  @layer _base {
-    :host {
-      background-color: #fff;
-      border: 1px solid #333;
-      border-radius: 4px;
-      box-sizing: border-box;
-      contain: layout;
-      display: inline-flex;
-      height: 3rem;
-      max-width: 100%;
-      overflow: hidden;
-    }
-
-    :host([size='small']) {
-      height: 2.5rem;
-    }
-
-    #track {
-      box-sizing: border-box;
-      display: flex;
-      flex-grow: 0;
-      flex-shrink: 1;
-      scroll-snap-type: inline mandatory;
-      overscroll-behavior-x: contain;
-      scroll-behavior: smooth;
-      overflow-x: scroll;
-      position: relative;
-      width: 100%;
-      scrollbar-width: none;
-    }
-
-    #track::-webkit-scrollbar {
-      display: none;
-    }
-
-    #btn-prev,
-    #btn-next {
-      align-items: center;
-      -webkit-appearance: none;
-         -moz-appearance: none;
-              appearance: none;
-      aspect-ratio: 1;
-      background-color: #fff;
-      border-width: 0;
-      color: #333;
-      cursor: pointer;
-      display: flex;
-      font-size: 1rem;
-      height: 100%;
-      justify-content: center;
-      width: 2.5rem;
-      z-index: 2;
-      position: absolute;
-      transition: 0.2s;
-
-      @media (pointer: fine) {
-        &:hover {
-          background-color: var(--grey-400);
-        }
-      }
-    }
-
-    #btn-prev {
-      border-right: 1px solid #333;
-    }
-    #btn-next {
-      border-left: 1px solid #333;
-      right: 0;
-    }
-
-    #btn-prev[aria-hidden='true'],
-    #btn-next[aria-hidden='true'] {
-      opacity: 0;
-      width: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    :host([size='small']) #btn-prev,
-    :host([size='small']) #btn-next {
-      width: 2rem;
-    }
-
-    ::slotted(*) {
-      flex-grow: 1;
-      flex-shrink: 0;
-      z-index: 1;
-      scroll-margin: 0 2.5rem;
-      scroll-snap-align: start;
-    }
-
-    #indicator {
-      display: none;
-    }
-  }
-
-  /* @layer _overrides {
-  } */
-}
-`;
-
-// libs/core/src/components/segmented-control/segmented-control.trans.styles.ts
-function register14() {
-  TransitionalStyles.instance.register(
-    "gds-segmented-control",
-    segmented_control_trans_styles_default.toString()
-  );
-  register13();
-}
-var segmented_control_trans_styles_default2 = register14;
-
-// libs/core/src/components/theme/chlorophyll-tokens.scss?inline
-var chlorophyll_tokens_default = `/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* Mixin for adding themes,
-Themes such as dark-mode, high-contrast mode etc.
-Values for light mode are used by default.
-*/
-/* mixin for generating css variables from map with optional prefix */
-:host {
-  display: contents;
-}
-
-:host([color-scheme=light]) {
-  --gds-sys-shape-corner-none: 0;
-  --gds-sys-shape-corner-small: 0.125rem;
-  --gds-sys-shape-corner-medium: 0.25rem;
-  --gds-sys-shape-corner-round: 50%;
-  --gds-ref-color-white: #ffffff;
-  --gds-ref-color-black: #000000;
-  --gds-ref-pallet-base000: hsl(0 0% 100%);
-  --gds-ref-pallet-base100: hsl(0, 0%, 97%);
-  --gds-ref-pallet-base200: hsl(0, 0%, 91%);
-  --gds-ref-pallet-base300: hsl(0, 0%, 87%);
-  --gds-ref-pallet-base400: hsl(0, 0%, 81%);
-  --gds-ref-pallet-base500: hsl(0, 0%, 68%);
-  --gds-ref-pallet-base600: hsl(0, 0%, 53%);
-  --gds-ref-pallet-base700: hsl(0, 0%, 29%);
-  --gds-ref-pallet-base800: hsl(0, 0%, 20%);
-  --gds-ref-pallet-base900: hsl(0, 0%, 10%);
-  --gds-ref-pallet-base1000: hsl(0 0% 0%);
-  --gds-sys-color-blue: #41b0ee;
-  --gds-sys-color-blue-dark-1: #0092e1;
-  --gds-sys-color-blue-dark-2: #007ac7;
-  --gds-sys-color-surface: var(--gds-ref-pallet-base000);
-  --gds-sys-color-base: var(--gds-ref-pallet-base800);
-  --gds-sys-color-font: var(--gds-ref-pallet-base800);
-  --gds-sys-color-base-container: var(--gds-ref-pallet-base500);
-  --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);
-  --gds-sys-color-blue: #41b0ee;
-  --gds-sys-color-dark-blue-1: #41b0ee;
-  --gds-sys-color-dark-blue-2: #007ac7;
-  --gds-sys-color-green: #60cd18;
-  --gds-sys-color-dark-green-1: #45b400;
-  --gds-sys-color-dark-green-2: #308800;
-  --gds-sys-color-yellow: #ffc500;
-  --gds-sys-color-dark-yellow-1: #ffb400;
-  --gds-sys-color-dark-yellow-2: #f8a000;
-  --gds-sys-color-text-primary: #333333;
-  --gds-sys-color-text-secondary: #ababab;
-  --gds-sys-color-text-white: #ffffff;
-  --gds-sys-color-text-black: #333333;
-  --gds-sys-color-text-inverted: #ffffff;
-  --gds-sys-color-text-link: #0062bc;
-  --gds-sys-color-text-error: #9f000a;
-  --gds-sys-color-text-disabled: #adadad;
-  --gds-sys-color-red: #f03529;
-  --gds-sys-color-dark-red-1: #d81a1a;
-  --gds-sys-color-dark-red-2: #bb000c;
-  --gds-sys-color-purple: #673ab6;
-  --gds-sys-color-dark-purple-1: #4f2c99;
-  --gds-sys-color-dark-purple-2: #3f2587;
-  --gds-sys-color-white: #ffffff;
-  --gds-sys-color-black: #000000;
-  --gds-sys-color-background-primary: #ffffff;
-  --gds-sys-color-background-secondary: #eeeeee;
-  --gds-sys-color-base-100: #f8f8f8;
-  --gds-sys-color-base-200: #e9e9e9;
-  --gds-sys-color-base-300: #dedede;
-  --gds-sys-color-base-400: #cecece;
-  --gds-sys-color-base-500: #adadad;
-  --gds-sys-color-base-600: #868686;
-  --gds-sys-color-base-700: #494949;
-  --gds-sys-color-base-800: #333333;
-  --gds-sys-color-base-900: #1a1a1a;
-  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);
-  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);
-  --gds-comp-checkbox-container-height: 1rem;
-  --gds-comp-checkbox-container-width: 1rem;
-  --gds-comp-checkbox-container-color: var(--gds-sys-color-surface);
-  --gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);
-  --gds-comp-checkbox-border-color: var(--gds-sys-color-base);
-  --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);
-  --gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);
-  --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);
-  --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);
-  --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);
-  --heading-primary-color: rgb(0, 0, 0);
-  --text-primary-color: rgb(51, 51, 51);
-  --text-secondary-color: rgb(134, 134, 134);
-  --text-disabled-color: var(--gds-ref-pallet-base600);
-  --text-primary-disabled-color: var(--gds-ref-pallet-base600);
-  --border-color: rgba(0, 0, 0, 0.17);
-  --border-secondary-color: rgba(0, 0, 0, 0.1);
-  --border-disabled-color: var(--gds-ref-pallet-base500);
-  --border-primary-disabled-color: var(--gds-ref-pallet-base500);
-  --border-color-invalid: rgb(159, 0, 10);
-  --border-color-valid: rgb(55, 157, 0);
-  --checkbox-checkmark-disabled-color: rgb(255, 255, 255);
-  --form-control-primary-bg-disabled: var(--gds-ref-pallet-base200);
-  --link-color-dark: rgb(51, 51, 51);
-  --link-color-dark-visited: rgb(73, 73, 73);
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-primary-background: rgb(0, 122, 199);
-  --intent-primary-color: #fff;
-  --intent-primary-fadable-color: 255, 255, 255;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-secondary-background: rgb(222, 222, 222);
-  --intent-secondary-color: black;
-  --intent-secondary-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-info-background: rgb(0, 122, 199);
-  --intent-info-color: #fff;
-  --intent-info-fadable-color: 255, 255, 255;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);
-  --intent-success-color: #fff;
-  --intent-success-fadable-color: 255, 255, 255;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-warning-background: rgb(255, 197, 0);
-  --intent-warning-color: black;
-  --intent-warning-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-danger-background: rgb(159, 0, 10);
-  --intent-danger-color: #fff;
-  --intent-danger-fadable-color: 255, 255, 255;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-light-background: rgb(238, 238, 238);
-  --intent-light-color: black;
-  --intent-light-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-dark-background: rgb(51, 51, 51);
-  --intent-dark-color: #fff;
-  --intent-dark-fadable-color: 255, 255, 255;
-  --grey-1100: rgb(26, 26, 26);
-  --grey-1000: rgb(51, 51, 51);
-  --grey-900: rgb(73, 73, 73);
-  --grey-800: rgb(134, 134, 134);
-  --grey-700: rgb(173, 173, 173);
-  --grey-600: rgb(206, 206, 206);
-  --grey-500: rgb(222, 222, 222);
-  --grey-400: rgb(233, 233, 233);
-  --grey-300: rgb(238, 238, 238);
-  --grey-200: rgb(248, 248, 248);
-  --grey-100: rgb(255, 255, 255);
-  color: var(--text-primary-color);
-  --gds-sys-outline-color: #333333;
-  --gds-comp-chips-fr-color: #333333;
-  --gds-comp-chips-bg-color: #ffffff;
-  --gds-comp-chips-br-color: #333333;
-  --gds-comp-chips-fr-color-hover: #ffffff;
-  --gds-comp-chips-bg-color-hover: #494949;
-  --gds-comp-chips-br-color-hover: #494949;
-  --gds-comp-chips-bg-color-active: #333333;
-  --gds-comp-chips-bg-color-action: #333333;
-  /* generate css variables */
-  --sg-z-index-datepicker: 995;
-  --sg-z-index-dropdown-backdrop: 990;
-  --sg-z-index-dropdown: 2000;
-  --sg-z-index-sticky: 1020;
-  --sg-z-index-fixed: 1030;
-  --sg-z-index-modal-backdrop: 1040;
-  --sg-z-index-modal: 1050;
-  --sg-z-index-popover: 1060;
-  --sg-z-index-tooltip: 1070;
-  --sg-text-primary: #333333;
-  --sg-text-secondary: #333333;
-  --sg-form-control-bg: #fff;
-  --sg-form-control-bg-disabled: #eeeeee;
-  --sg-border-color: var(--gds-ref-pallet-base600);
-  --sg-border-width: 1px;
-  --sg-border-width-50: 0.5px;
-  --sg-border-radius: 0.25rem;
-  --sg-hsl-contrast: 0deg, 0%, 0%;
-  --sg-hsl-light: 0deg, 0%, 97.2549019608%;
-  --sg-hsl-light-contrast: 0deg, 0%, 0%;
-  --sg-hsl-dark: 0deg, 0%, 10.1960784314%;
-  --sg-hsl-dark-contrast: 0deg, 0%, 100%;
-  --sg-hsl-black: 0deg, 0%, 0%;
-  --sg-hsl-white: 0deg, 0%, 100%;
-  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;
-  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;
-  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;
-  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;
-  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;
-  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;
-  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;
-  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;
-  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;
-  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;
-  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;
-  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;
-  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;
-  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;
-  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;
-  --sg-grey-100: #f8f8f8;
-  --sg-grey-200: #e9e9e9;
-  --sg-grey-300: #dedede;
-  --sg-grey-400: #cecece;
-  --sg-grey-500: #adadad;
-  --sg-grey-600: #868686;
-  --sg-grey-700: #494949;
-  --sg-grey-800: #333333;
-  --sg-grey-900: #1a1a1a;
-  --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;
-  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;
-  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;
-  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;
-  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;
-  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;
-  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;
-  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;
-  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;
-  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;
-  --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;
-  --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;
-  --sg-bg-level-0: #eeeeee;
-  --sg-bg-level-1: #fff;
-  --sg-bg-level-2: #fff;
-  --sg-bg-level-3: #fff;
-  --sg-table-header-background: #1a1a1a;
-  --sg-table-header-color: #fff;
-  --sg-table-cell-padding-x: 0.5rem;
-  --sg-table-cell-padding-y: 0.6875rem;
-  --sg-table-border-width: 1px;
-  --sg-table-border-color: var(--gds-ref-pallet-base600);
-  --sg-table-sort-icon-color: var(--gds-ref-pallet-base600);
-  --sg-table-sort-icon-color-active: #fff;
-  --sg-skeleton-loader-highlight-color: #dedede;
-  --sg-skeleton-loader-background-color: #f8f8f8;
-  --sg-modal-background: #fff;
-  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);
-  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-  --sg-popover-background: #fff;
-  --sg-popover-border-color: #007ac7;
-  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-  --sg-card-background: #fff;
-  --sg-card-heading-color: #333333;
-  --sg-card-color: #333333;
-  --sg-card-border: solid 1px #fff;
-  --sg-card-border-radius: 4px;
-}
-
-/* force dark mode */
-:host([color-scheme=dark]) {
-  --heading-primary-color: rgb(255, 255, 255);
-  --text-primary-color: rgba(255, 255, 255, 0.9);
-  --text-secondary-color: rgba(255, 255, 255, 0.6);
-  --text-disabled-color: rgba(255, 255, 255, 0.07);
-  --text-primary-disabled-color: rgba(255, 255, 255, 0.07);
-  --border-color: rgb(51, 51, 51);
-  --border-secondary-color: rgb(51, 51, 51);
-  --border-disabled-color: rgb(44, 44, 44);
-  --border-primary-disabled-color: rgb(44, 44, 44);
-  --border-color-invalid: rgb(255, 89, 79);
-  --border-color-valid: rgb(48, 136, 0);
-  --checkbox-checkmark-disabled-color: rgb(51, 51, 51);
-  --link-color-dark: rgb(179, 179, 179);
-  --link-color-dark-visited: rgb(171, 171, 171);
-  --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-primary-background: rgb(44, 156, 217);
-  --intent-primary-color: #000;
-  --intent-primary-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-secondary-background: rgb(51, 51, 51);
-  --intent-secondary-color: #fff;
-  --intent-secondary-fadable-color: 255, 255, 255;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-info-background: rgb(44, 156, 217);
-  --intent-info-color: #000;
-  --intent-info-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-success-background: rgb(48, 136, 0);
-  --intent-success-color: #000;
-  --intent-success-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-warning-background: rgb(255, 225, 130);
-  --intent-warning-color: #000;
-  --intent-warning-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-danger-background: rgb(255, 89, 79);
-  --intent-danger-color: #000;
-  --intent-danger-fadable-color: 0, 0, 0;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-light-background: rgb(39, 39, 39);
-  --intent-light-color: #fff;
-  --intent-light-fadable-color: 255, 255, 255;
-  /* try and adjust colors to get desired color combination,
-  in this case adjust background to go with white foreground */
-  --intent-dark-background: rgb(171, 171, 171);
-  --intent-dark-color: #000;
-  --intent-dark-fadable-color: 0, 0, 0;
-  --grey-100: rgb(18, 18, 18);
-  --grey-200: rgb(34, 34, 34);
-  --grey-300: rgb(39, 39, 39);
-  --grey-400: rgb(44, 44, 44);
-  --grey-500: rgb(51, 51, 51);
-  --grey-600: rgb(60, 60, 60);
-  --grey-700: rgb(67, 67, 67);
-  --grey-800: rgb(73, 73, 73);
-  --grey-900: rgb(117, 117, 117);
-  --grey-1000: rgb(171, 171, 171);
-  --grey-1100: rgb(179, 179, 179);
-  color: var(--text-primary-color);
-  --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);
-  --gds-comp-chips-fr-color: #dedede;
-  --gds-comp-chips-bg-color: #2c2c2c;
-  --gds-comp-chips-br-color: #2c2c2c;
-  --gds-comp-chips-fr-color-hover: #dedede;
-  --gds-comp-chips-bg-color-hover: #2c2c2c;
-  --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);
-  --gds-comp-chips-bg-color-active: #222222;
-  --gds-comp-chips-bg-color-action: #2c2c2c;
-  --gds-sys-color-focus-outline: white;
-  --gds-sys-color-font: var(--gds-ref-pallet-base300);
-  /* generate css variables */
-  --sg-z-index-datepicker: 995;
-  --sg-z-index-dropdown-backdrop: 990;
-  --sg-z-index-dropdown: 2000;
-  --sg-z-index-sticky: 1020;
-  --sg-z-index-fixed: 1030;
-  --sg-z-index-modal-backdrop: 1040;
-  --sg-z-index-modal: 1050;
-  --sg-z-index-popover: 1060;
-  --sg-z-index-tooltip: 1070;
-  --sg-text-primary: #dedede;
-  --sg-text-secondary: #ababab;
-  --sg-form-control-bg: rgba(0, 0, 0, 0.1);
-  --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);
-  --sg-border-color: #ababab;
-  --sg-border-width: 1px;
-  --sg-border-width-50: 0.5px;
-  --sg-border-radius: 0.25rem;
-  --sg-hsl-contrast: 0deg, 0%, 100%;
-  --sg-hsl-light: 0deg, 0%, 87.0588235294%;
-  --sg-hsl-light-contrast: 0deg, 0%, 0%;
-  --sg-hsl-dark: 0deg, 0%, 7.0588235294%;
-  --sg-hsl-dark-contrast: 0deg, 0%, 100%;
-  --sg-hsl-black: 0deg, 0%, 0%;
-  --sg-hsl-white: 0deg, 0%, 100%;
-  --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;
-  --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;
-  --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;
-  --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;
-  --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;
-  --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;
-  --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;
-  --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;
-  --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;
-  --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;
-  --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;
-  --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;
-  --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;
-  --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;
-  --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;
-  --sg-grey-100: #dedede;
-  --sg-grey-200: #ababab;
-  --sg-grey-300: #757575;
-  --sg-grey-400: #494949;
-  --sg-grey-500: #333333;
-  --sg-grey-600: #2c2c2c;
-  --sg-grey-700: #272727;
-  --sg-grey-800: #222222;
-  --sg-grey-900: #121212;
-  --sg-intent-neutral-hsl: 0deg, 0%, 20%;
-  --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;
-  --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;
-  --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;
-  --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;
-  --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;
-  --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;
-  --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;
-  --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;
-  --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;
-  --sg-hsl-disabled-background: 0deg, 0%, 20%;
-  --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;
-  --sg-bg-level-0: #121212;
-  --sg-bg-level-1: #222222;
-  --sg-bg-level-2: #272727;
-  --sg-bg-level-3: #2c2c2c;
-  --sg-table-header-background: #121212;
-  --sg-table-header-color: #fff;
-  --sg-table-cell-padding-x: 0.5rem;
-  --sg-table-cell-padding-y: 0.6875rem;
-  --sg-table-border-width: 1px;
-  --sg-table-border-color: #ababab;
-  --sg-table-sort-icon-color: #ababab;
-  --sg-table-sort-icon-color-active: #fff;
-  --sg-skeleton-loader-highlight-color: #494949;
-  --sg-skeleton-loader-background-color: #2c2c2c;
-  --sg-modal-background: #272727;
-  --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-  --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);
-  --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-  --sg-popover-background: #222222;
-  --sg-popover-border-color: #007ac7;
-  --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-  --sg-card-background: #222222;
-  --sg-card-heading-color: #dedede;
-  --sg-card-color: #dedede;
-  --sg-card-border: solid 1px #222222;
-  --sg-card-border-radius: 4px;
-}
-
-/* use preferred color scheme */
-@media (prefers-color-scheme: dark) {
-  :host,
-  :host([color-scheme=auto]) {
-    --heading-primary-color: rgb(255, 255, 255);
-    --text-primary-color: rgba(255, 255, 255, 0.9);
-    --text-secondary-color: rgba(255, 255, 255, 0.6);
-    --text-disabled-color: rgba(255, 255, 255, 0.07);
-    --text-primary-disabled-color: rgba(255, 255, 255, 0.07);
-    --border-color: rgb(51, 51, 51);
-    --border-secondary-color: rgb(51, 51, 51);
-    --border-disabled-color: rgb(44, 44, 44);
-    --border-primary-disabled-color: rgb(44, 44, 44);
-    --border-color-invalid: rgb(255, 89, 79);
-    --border-color-valid: rgb(48, 136, 0);
-    --checkbox-checkmark-disabled-color: rgb(51, 51, 51);
-    --link-color-dark: rgb(179, 179, 179);
-    --link-color-dark-visited: rgb(171, 171, 171);
-    --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-primary-background: rgb(44, 156, 217);
-    --intent-primary-color: #000;
-    --intent-primary-fadable-color: 0, 0, 0;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-secondary-background: rgb(51, 51, 51);
-    --intent-secondary-color: #fff;
-    --intent-secondary-fadable-color: 255, 255, 255;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-info-background: rgb(44, 156, 217);
-    --intent-info-color: #000;
-    --intent-info-fadable-color: 0, 0, 0;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-success-background: rgb(48, 136, 0);
-    --intent-success-color: #000;
-    --intent-success-fadable-color: 0, 0, 0;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-warning-background: rgb(255, 225, 130);
-    --intent-warning-color: #000;
-    --intent-warning-fadable-color: 0, 0, 0;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-danger-background: rgb(255, 89, 79);
-    --intent-danger-color: #000;
-    --intent-danger-fadable-color: 0, 0, 0;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-light-background: rgb(39, 39, 39);
-    --intent-light-color: #fff;
-    --intent-light-fadable-color: 255, 255, 255;
-    /* try and adjust colors to get desired color combination,
-    in this case adjust background to go with white foreground */
-    --intent-dark-background: rgb(171, 171, 171);
-    --intent-dark-color: #000;
-    --intent-dark-fadable-color: 0, 0, 0;
-    --grey-100: rgb(18, 18, 18);
-    --grey-200: rgb(34, 34, 34);
-    --grey-300: rgb(39, 39, 39);
-    --grey-400: rgb(44, 44, 44);
-    --grey-500: rgb(51, 51, 51);
-    --grey-600: rgb(60, 60, 60);
-    --grey-700: rgb(67, 67, 67);
-    --grey-800: rgb(73, 73, 73);
-    --grey-900: rgb(117, 117, 117);
-    --grey-1000: rgb(171, 171, 171);
-    --grey-1100: rgb(179, 179, 179);
-    color: var(--text-primary-color);
-    --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);
-    --gds-comp-chips-fr-color: #dedede;
-    --gds-comp-chips-bg-color: #2c2c2c;
-    --gds-comp-chips-br-color: #2c2c2c;
-    --gds-comp-chips-fr-color-hover: #dedede;
-    --gds-comp-chips-bg-color-hover: #2c2c2c;
-    --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);
-    --gds-comp-chips-bg-color-active: #222222;
-    --gds-comp-chips-bg-color-action: #2c2c2c;
-    --gds-sys-color-focus-outline: white;
-    --gds-sys-color-font: var(--gds-ref-pallet-base300);
-    /* generate css variables */
-    --sg-z-index-datepicker: 995;
-    --sg-z-index-dropdown-backdrop: 990;
-    --sg-z-index-dropdown: 2000;
-    --sg-z-index-sticky: 1020;
-    --sg-z-index-fixed: 1030;
-    --sg-z-index-modal-backdrop: 1040;
-    --sg-z-index-modal: 1050;
-    --sg-z-index-popover: 1060;
-    --sg-z-index-tooltip: 1070;
-    --sg-text-primary: #dedede;
-    --sg-text-secondary: #ababab;
-    --sg-form-control-bg: rgba(0, 0, 0, 0.1);
-    --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);
-    --sg-border-color: #ababab;
-    --sg-border-width: 1px;
-    --sg-border-width-50: 0.5px;
-    --sg-border-radius: 0.25rem;
-    --sg-hsl-contrast: 0deg, 0%, 100%;
-    --sg-hsl-light: 0deg, 0%, 87.0588235294%;
-    --sg-hsl-light-contrast: 0deg, 0%, 0%;
-    --sg-hsl-dark: 0deg, 0%, 7.0588235294%;
-    --sg-hsl-dark-contrast: 0deg, 0%, 100%;
-    --sg-hsl-black: 0deg, 0%, 0%;
-    --sg-hsl-white: 0deg, 0%, 100%;
-    --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;
-    --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;
-    --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;
-    --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;
-    --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;
-    --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;
-    --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;
-    --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;
-    --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;
-    --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;
-    --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;
-    --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;
-    --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;
-    --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;
-    --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;
-    --sg-grey-100: #dedede;
-    --sg-grey-200: #ababab;
-    --sg-grey-300: #757575;
-    --sg-grey-400: #494949;
-    --sg-grey-500: #333333;
-    --sg-grey-600: #2c2c2c;
-    --sg-grey-700: #272727;
-    --sg-grey-800: #222222;
-    --sg-grey-900: #121212;
-    --sg-intent-neutral-hsl: 0deg, 0%, 20%;
-    --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;
-    --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;
-    --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;
-    --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;
-    --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;
-    --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;
-    --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;
-    --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;
-    --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;
-    --sg-hsl-disabled-background: 0deg, 0%, 20%;
-    --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;
-    --sg-bg-level-0: #121212;
-    --sg-bg-level-1: #222222;
-    --sg-bg-level-2: #272727;
-    --sg-bg-level-3: #2c2c2c;
-    --sg-table-header-background: #121212;
-    --sg-table-header-color: #fff;
-    --sg-table-cell-padding-x: 0.5rem;
-    --sg-table-cell-padding-y: 0.6875rem;
-    --sg-table-border-width: 1px;
-    --sg-table-border-color: #ababab;
-    --sg-table-sort-icon-color: #ababab;
-    --sg-table-sort-icon-color-active: #fff;
-    --sg-skeleton-loader-highlight-color: #494949;
-    --sg-skeleton-loader-background-color: #2c2c2c;
-    --sg-modal-background: #272727;
-    --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-    --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);
-    --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-    --sg-popover-background: #222222;
-    --sg-popover-border-color: #007ac7;
-    --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
-    --sg-card-background: #222222;
-    --sg-card-heading-color: #dedede;
-    --sg-card-color: #dedede;
-    --sg-card-border: solid 1px #222222;
-    --sg-card-border-radius: 4px;
-  }
-}`;
-
-// libs/core/src/components/theme/theme.trans.styles.ts
-function register15() {
-  TransitionalStyles.instance.register(
-    "gds-theme",
-    chlorophyll_tokens_default.toString()
-  );
-}
-var theme_trans_styles_default = register15;
-
-// libs/core/src/utils/transitional-styles/transitional-styles.ts
-var registerTransitionalStyles = () => {
-  register15();
-  register7();
-  register3();
-  register8();
-  register11();
-  register14();
-  register10();
-  register6();
-  register12();
-};
-var _styles, _elements, _useLegacyStylesheets;
-var _TransitionalStyles = class _TransitionalStyles {
-  constructor() {
-    __privateAdd(this, _styles, /* @__PURE__ */ new Map());
-    __privateAdd(this, _elements, /* @__PURE__ */ new Map());
-    __privateAdd(this, _useLegacyStylesheets, !supportsConstructedStylesheets());
-  }
-  static get instance() {
-    var _a;
-    if (!((_a = globalThis.__gdsTransitionalStyles) == null ? void 0 : _a[VER_SUFFIX]))
-      globalThis.__gdsTransitionalStyles = __spreadProps(__spreadValues({}, globalThis.__gdsTransitionalStyles), {
-        [VER_SUFFIX]: new _TransitionalStyles()
-      });
-    return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
-  }
-  apply(element, styleKey) {
-    if (!element.shadowRoot)
-      return;
-    const style = __privateGet(this, _styles).get(styleKey);
-    if (!style)
-      return;
-    __privateGet(this, _elements).set(styleKey, element);
-    this.applyToElement(styleKey, style);
-  }
-  applyToElement(styleKey, sheet) {
-    var _a, _b;
-    const element = __privateGet(this, _elements).get(styleKey);
-    if (!element || !element.shadowRoot)
-      return;
-    const applyTransitional = () => {
-      element._dynamicStylesController.clearInitial();
-      element._dynamicStylesController.inject("t-styles", unsafeCSS(sheet));
-      element._isUsingTransitionalStyles = true;
-    };
-    const clearTransitional = () => {
-      element._isUsingTransitionalStyles = false;
-      element._dynamicStylesController.clear("t-styles");
-      element._dynamicStylesController.restoreInitial();
-    };
-    const gdsThemeSelector = "[gds-element=gds-theme]";
-    let currentRoot = element.getRootNode();
-    let closestGdsTheme = element.closest(gdsThemeSelector);
-    while (closestGdsTheme === null && currentRoot !== document) {
-      closestGdsTheme = (_a = currentRoot.host) == null ? void 0 : _a.closest(
-        gdsThemeSelector
-      );
-      currentRoot = (_b = currentRoot.host) == null ? void 0 : _b.getRootNode();
-    }
-    if (closestGdsTheme) {
-      const theme = closestGdsTheme;
-      const updateStyles = () => {
-        if (theme.designVersion === "2023") {
-          clearTransitional();
-        } else {
-          applyTransitional();
-        }
-      };
-      theme.addEventListener("gds-design-version-changed", updateStyles);
-      element.addEventListener(
-        "gds-element-disconnected",
-        () => theme.removeEventListener("gds-design-version-changed", updateStyles)
-      );
-      if (theme.designVersion === "2023") {
-        clearTransitional();
-        return;
-      }
-    }
-    applyTransitional();
-  }
-  register(name, styles) {
-    let preparedStyle = styles;
-    if (__privateGet(this, _useLegacyStylesheets)) {
-      preparedStyle = `@layer reset {
-        *:not(style, [gds-element]) {
-          all: revert;
-        }
-      }
-      ${styles}`;
-    }
-    __privateGet(this, _styles).set(name, preparedStyle);
-    this.applyToElement(name, preparedStyle);
-  }
-};
-_styles = new WeakMap();
-_elements = new WeakMap();
-_useLegacyStylesheets = new WeakMap();
-var TransitionalStyles = _TransitionalStyles;
-
-// libs/core/src/components/button/button.trans.styles.scss?inline
-var button_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-i.sg-icon {
-  font-size: 0;
-  width: 1rem;
-  height: 1rem;
-  display: inline-block;
-}
-i.sg-icon::before {
-  content: "";
-  display: inline-block;
-  background: var(--color);
-  width: 100%;
-  height: 100%;
-  -webkit-mask-repeat: no-repeat;
-          mask-repeat: no-repeat;
-}
-i.sg-icon.sg-icon-calendar::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-calendar-range::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-ellipsis::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-grip-vertical::before {
-  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-next::before {
-  background: none;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-left: -10px;
-  margin-top: 2px;
-  transform: translate(75%) rotate(-135deg) scaleZ(-1);
-  transition: transform 0.3s ease-in;
-  width: 12px;
-}
-i.sg-icon.sg-icon-previous::before {
-  background: none;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-left: -4px;
-  margin-top: 2px;
-  transform: translate(75%) rotate(45deg) scaleZ(-1);
-  transition: transform 0.3s ease-in;
-  width: 12px;
-}
-i.sg-icon.sg-icon-ellipsis::before {
-  margin-right: -2px;
-}
-
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _ranks, _overrides;
-  :host {
-    display: inline-block;
-  }
-  @layer _base {
-    .button {
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      font-family: inherit;
-      padding: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      padding-bottom: 0.75rem;
-      padding-top: 0.75rem;
-      border-radius: var(--sg-border-radius);
-      border: solid var(--sg-border-width) var(--sg-border-color);
-      font-weight: 500;
-      min-height: 2.75rem;
-      align-items: center;
-      display: inline-flex;
-      justify-content: center;
-      box-sizing: border-box;
-      font-size: inherit;
-      overflow: hidden;
-      display: flex;
-      gap: 0.5rem;
-      text-decoration: none;
-      width: 100%;
-    }
-    .button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    .button:focus, .button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    @media (max-width: 35.98em) {
-      .button {
-        min-width: 100%;
-      }
-    }
-    @media screen and (-ms-high-contrast: active) {
-      .button {
-        border: 2px solid currentcolor;
-      }
-    }
-    .button.small {
-      min-height: 2rem;
-      padding: 0.4375rem 0.75rem;
-      line-height: 1rem;
-    }
-    .button.large {
-      min-height: 4rem;
-      padding: 1rem 1.5rem;
-      font-size: 1.5rem;
-      line-height: 2rem;
-    }
-    .button slot:not([name]) {
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    :host(:not([variant=ghost])) .button {
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-      background: rgb(0, 122, 199);
-      border-color: rgb(0, 122, 199);
-      color: #fff;
-      --color: #fff;
-    }
-    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      color: rgb(255, 255, 255);
-      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-    }
-    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {
-      background-color: rgb(0, 122, 199);
-      color: rgb(255, 255, 255);
-      --background: rgb(0, 122, 199);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(0, 122, 199);
-    }
-    :host(:not([variant=ghost])) .button:focus-visible {
-      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      color: rgb(255, 255, 255);
-      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;
-    }
-    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {
-      background: var(--form-control-primary-bg-disabled) !important;
-      color: var(--text-primary-disabled-color) !important;
-      border-color: var(--border-primary-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host([rank*=secondary]) .button {
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-      background: transparent;
-      border-color: rgb(0, 122, 199);
-      color: rgb(0, 122, 199);
-      --color: rgb(0, 122, 199);
-    }
-    :host([rank*=secondary]) .button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      color: rgb(255, 255, 255);
-      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-    }
-    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {
-      background-color: rgb(0, 122, 199);
-      color: rgb(255, 255, 255);
-      --background: rgb(0, 122, 199);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(0, 122, 199);
-    }
-    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {
-      background: var(--sg-form-control-bg-disabled) !important;
-      color: var(--text-disabled-color) !important;
-      border-color: var(--border-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host([rank*=tertiary]) .button {
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-      background: transparent;
-      border-color: transparent;
-      color: rgb(0, 122, 199);
-      --color: rgb(0, 122, 199);
-    }
-    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      color: rgb(255, 255, 255);
-      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-    }
-    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {
-      background-color: rgb(0, 122, 199);
-      color: rgb(255, 255, 255);
-      --background: rgb(0, 122, 199);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(0, 122, 199);
-    }
-    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {
-      background: var(--sg-form-control-bg-disabled) !important;
-      color: var(--text-disabled-color) !important;
-      border-color: var(--border-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {
-      color: var(--text-disabled-color);
-    }
-    /* stylelint-disable */
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,
-    :host([variant=negative][rank=primary]) .button {
-      background: rgb(187, 0, 12);
-      border-color: rgb(187, 0, 12);
-      color: #fff;
-      --color: #fff;
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,
-    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(216, 26, 26);
-      color: rgb(255, 255, 255);
-      --background: rgb(216, 26, 26);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(216, 26, 26);
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,
-    :host([variant=negative][rank=primary]) .button[aria-selected=true],
-    :host([variant=negative][rank=primary]) .button:active,
-    :host([variant=negative][rank=primary]) .button.active,
-    :host([variant=negative][rank=primary]) .button.active:hover,
-    :host([variant=negative][rank=primary]) .button:active:hover {
-      background-color: rgb(187, 0, 12);
-      color: rgb(255, 255, 255);
-      --background: rgb(187, 0, 12);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(187, 0, 12);
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,
-    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,
-    :host([variant=negative][rank=primary]) .button.active:hover,
-    :host([variant=negative][rank=primary]) .button:active:hover {
-      opacity: 0.9;
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),
-    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,
-    :host([variant=negative][rank=primary]) .button:focus,
-    :host([variant=negative][rank=primary]) .button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],
-    :host([variant=negative][rank=primary]) .button:disabled,
-    :host([variant=negative][rank=primary]) .button.disabled,
-    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {
-      background: var(--form-control-primary-bg-disabled) !important;
-      color: var(--text-primary-disabled-color) !important;
-      border-color: var(--border-primary-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,
-    :host([variant=negative][rank=primary]) .button:disabled::placeholder,
-    :host([variant=negative][rank=primary]) .button.disabled::placeholder,
-    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {
-      color: var(--text-disabled-color);
-    }
-    /* stylelint-enable */
-    :host([variant=negative][rank=secondary]) .button,
-    :host([variant=negative][rank=tertiary]) .button {
-      color: rgb(187, 0, 12);
-      --color: rgb(187, 0, 12);
-      border-color: transparent;
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-    }
-    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,
-    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(216, 26, 26);
-      color: rgb(255, 255, 255);
-      --background: rgb(216, 26, 26);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(216, 26, 26);
-    }
-    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,
-    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],
-    :host([variant=negative][rank=tertiary]) .button:active,
-    :host([variant=negative][rank=tertiary]) .button.active,
-    :host([variant=negative][rank=tertiary]) .button.active:hover,
-    :host([variant=negative][rank=tertiary]) .button:active:hover {
-      background-color: rgb(187, 0, 12);
-      color: rgb(255, 255, 255);
-      --background: rgb(187, 0, 12);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(187, 0, 12);
-    }
-    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,
-    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,
-    :host([variant=negative][rank=tertiary]) .button.active:hover,
-    :host([variant=negative][rank=tertiary]) .button:active:hover {
-      opacity: 0.9;
-    }
-    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),
-    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,
-    :host([variant=negative][rank=tertiary]) .button:focus,
-    :host([variant=negative][rank=tertiary]) .button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    :host([variant=negative][rank=secondary]) .button {
-      border-color: rgb(187, 0, 12);
-    }
-    :host([variant=ghost]) .button {
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-      border-color: rgb(51, 51, 51);
-      color: rgb(51, 51, 51);
-      --color: rgb(51, 51, 51);
-    }
-    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(51, 51, 51);
-      color: rgb(255, 255, 255);
-      --background: rgb(51, 51, 51);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(51, 51, 51);
-    }
-    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {
-      background-color: rgb(51, 51, 51);
-      color: rgb(255, 255, 255);
-      --background: rgb(51, 51, 51);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(51, 51, 51);
-    }
-    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {
-      opacity: 0.9;
-    }
-    :host([variant=ghost]) .button:focus-visible {
-      background-color: rgb(51, 51, 51);
-      color: rgb(255, 255, 255);
-      --background: rgb(51, 51, 51);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(51, 51, 51) !important;
-    }
-    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {
-      color: var(--text-disabled-color) !important;
-      border-color: var(--border-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {
-      color: var(--text-disabled-color);
-    }
-  }
-  @layer _overrides {
-    :host .button.icon {
-      padding: 0.75rem;
-      background: transparent;
-      border-width: 0px;
-      color: currentColor;
-    }
-    :host .button.icon:hover {
-      color: currentColor;
-      background: var(--grey-500);
-    }
-    :host .button.icon slot {
-      display: contents;
-    }
-    .button.icon.xs {
-      min-height: 1.5rem;
-      line-height: 0.75rem;
-      padding: 0.25rem;
-    }
-    .button.icon.small {
-      padding: 0.5rem;
-    }
-    .button.icon.large {
-      padding: 1rem;
-    }
-  }
-}`;
-
-// libs/core/src/components/button/button.trans.styles.ts
-function register6() {
-  TransitionalStyles.instance.register("gds-button", button_trans_styles_default.toString());
-}
-var button_trans_styles_default2 = register6;
-
-export {
-  register6 as register,
-  button_trans_styles_default2 as button_trans_styles_default,
-  register2,
-  popover_trans_styles_default2 as popover_trans_styles_default,
-  register3,
-  context_menu_trans_styles_default2 as context_menu_trans_styles_default,
-  register4,
-  calendar_trans_styles_default2 as calendar_trans_styles_default,
-  register5,
-  register7 as register6,
-  dropdown_trans_styles_default,
-  register8 as register7,
-  datepicker_trans_styles_default2 as datepicker_trans_styles_default,
-  register9 as register8,
-  filter_chip_trans_styles_default2 as filter_chip_trans_styles_default,
-  register10 as register9,
-  filter_chips_trans_styles_default2 as filter_chips_trans_styles_default,
-  register11 as register10,
-  grouped_list_trans_styles_default2 as grouped_list_trans_styles_default,
-  register12 as register11,
-  input_trans_styles_default,
-  register13 as register12,
-  segment_trans_styles_default2 as segment_trans_styles_default,
-  register14 as register13,
-  segmented_control_trans_styles_default2 as segmented_control_trans_styles_default,
-  register15 as register14,
-  theme_trans_styles_default,
-  registerTransitionalStyles,
-  TransitionalStyles
-};