@sebgroup/green-core 0.0.0-v-angular-20250113082841

package/chunks/chunk.J35HKXK4.js

@@ -0,0 +1,2867 @@
+import {
+  VER_SUFFIX
+} from "./chunk.MLXMQIEV.js";
+import {
+  supportsConstructedStylesheets
+} from "./chunk.WVKINQII.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([aria-hidden=true]) div {
+    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;
+  }
+  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/components/dropdown/dropdown.trans.styles.scss?inline
+var dropdown_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 */
+/* rules for groups of checkboxes and radio buttons*/
+@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  input:not([type]),
+  input[type=date],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=email],
+  input[type=month],
+  input[type=number],
+  input[type=password],
+  input[type=search],
+  input[type=tel],
+  input[type=text],
+  input[type=time],
+  input[type=url],
+  input[type=week] {
+    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);
+    --border-color: var(--sg-border-color);
+    background-color: var(--sg-form-control-bg);
+    color: var(--sg-text-primary);
+    min-height: 2.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  input:not([type]):focus:not(:focus-visible),
+  input[type=date]:focus:not(:focus-visible),
+  input[type=datetime]:focus:not(:focus-visible),
+  input[type=datetime-local]:focus:not(:focus-visible),
+  input[type=email]:focus:not(:focus-visible),
+  input[type=month]:focus:not(:focus-visible),
+  input[type=number]:focus:not(:focus-visible),
+  input[type=password]:focus:not(:focus-visible),
+  input[type=search]:focus:not(:focus-visible),
+  input[type=tel]:focus:not(:focus-visible),
+  input[type=text]:focus:not(:focus-visible),
+  input[type=time]:focus:not(:focus-visible),
+  input[type=url]:focus:not(:focus-visible),
+  input[type=week]:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  input:not([type]):focus, input:not([type]):focus-visible,
+  input[type=date]:focus,
+  input[type=date]:focus-visible,
+  input[type=datetime]:focus,
+  input[type=datetime]:focus-visible,
+  input[type=datetime-local]:focus,
+  input[type=datetime-local]:focus-visible,
+  input[type=email]:focus,
+  input[type=email]:focus-visible,
+  input[type=month]:focus,
+  input[type=month]:focus-visible,
+  input[type=number]:focus,
+  input[type=number]:focus-visible,
+  input[type=password]:focus,
+  input[type=password]:focus-visible,
+  input[type=search]:focus,
+  input[type=search]:focus-visible,
+  input[type=tel]:focus,
+  input[type=tel]:focus-visible,
+  input[type=text]:focus,
+  input[type=text]:focus-visible,
+  input[type=time]:focus,
+  input[type=time]:focus-visible,
+  input[type=url]:focus,
+  input[type=url]:focus-visible,
+  input[type=week]:focus,
+  input[type=week]:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  input:not([type]).small,
+  input[type=date].small,
+  input[type=datetime].small,
+  input[type=datetime-local].small,
+  input[type=email].small,
+  input[type=month].small,
+  input[type=number].small,
+  input[type=password].small,
+  input[type=search].small,
+  input[type=tel].small,
+  input[type=text].small,
+  input[type=time].small,
+  input[type=url].small,
+  input[type=week].small {
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    line-height: 1rem;
+  }
+  @media screen and (-ms-high-contrast: active) {
+    input:not([type]),
+    input[type=date],
+    input[type=datetime],
+    input[type=datetime-local],
+    input[type=email],
+    input[type=month],
+    input[type=number],
+    input[type=password],
+    input[type=search],
+    input[type=tel],
+    input[type=text],
+    input[type=time],
+    input[type=url],
+    input[type=week] {
+      border: 2px solid currentcolor;
+    }
+  }
+  input:not([type]):disabled, input:not([type]).disabled, input:not([type])[aria-disabled=true],
+  input[type=date]:disabled,
+  input[type=date].disabled,
+  input[type=date][aria-disabled=true],
+  input[type=datetime]:disabled,
+  input[type=datetime].disabled,
+  input[type=datetime][aria-disabled=true],
+  input[type=datetime-local]:disabled,
+  input[type=datetime-local].disabled,
+  input[type=datetime-local][aria-disabled=true],
+  input[type=email]:disabled,
+  input[type=email].disabled,
+  input[type=email][aria-disabled=true],
+  input[type=month]:disabled,
+  input[type=month].disabled,
+  input[type=month][aria-disabled=true],
+  input[type=number]:disabled,
+  input[type=number].disabled,
+  input[type=number][aria-disabled=true],
+  input[type=password]:disabled,
+  input[type=password].disabled,
+  input[type=password][aria-disabled=true],
+  input[type=search]:disabled,
+  input[type=search].disabled,
+  input[type=search][aria-disabled=true],
+  input[type=tel]:disabled,
+  input[type=tel].disabled,
+  input[type=tel][aria-disabled=true],
+  input[type=text]:disabled,
+  input[type=text].disabled,
+  input[type=text][aria-disabled=true],
+  input[type=time]:disabled,
+  input[type=time].disabled,
+  input[type=time][aria-disabled=true],
+  input[type=url]:disabled,
+  input[type=url].disabled,
+  input[type=url][aria-disabled=true],
+  input[type=week]:disabled,
+  input[type=week].disabled,
+  input[type=week][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;
+  }
+  input:not([type]):disabled::-moz-placeholder, input:not([type]).disabled::-moz-placeholder, input:not([type])[aria-disabled=true]::-moz-placeholder, input[type=date]:disabled::-moz-placeholder, input[type=date].disabled::-moz-placeholder, input[type=date][aria-disabled=true]::-moz-placeholder, input[type=datetime]:disabled::-moz-placeholder, input[type=datetime].disabled::-moz-placeholder, input[type=datetime][aria-disabled=true]::-moz-placeholder, input[type=datetime-local]:disabled::-moz-placeholder, input[type=datetime-local].disabled::-moz-placeholder, input[type=datetime-local][aria-disabled=true]::-moz-placeholder, input[type=email]:disabled::-moz-placeholder, input[type=email].disabled::-moz-placeholder, input[type=email][aria-disabled=true]::-moz-placeholder, input[type=month]:disabled::-moz-placeholder, input[type=month].disabled::-moz-placeholder, input[type=month][aria-disabled=true]::-moz-placeholder, input[type=number]:disabled::-moz-placeholder, input[type=number].disabled::-moz-placeholder, input[type=number][aria-disabled=true]::-moz-placeholder, input[type=password]:disabled::-moz-placeholder, input[type=password].disabled::-moz-placeholder, input[type=password][aria-disabled=true]::-moz-placeholder, input[type=search]:disabled::-moz-placeholder, input[type=search].disabled::-moz-placeholder, input[type=search][aria-disabled=true]::-moz-placeholder, input[type=tel]:disabled::-moz-placeholder, input[type=tel].disabled::-moz-placeholder, input[type=tel][aria-disabled=true]::-moz-placeholder, input[type=text]:disabled::-moz-placeholder, input[type=text].disabled::-moz-placeholder, input[type=text][aria-disabled=true]::-moz-placeholder, input[type=time]:disabled::-moz-placeholder, input[type=time].disabled::-moz-placeholder, input[type=time][aria-disabled=true]::-moz-placeholder, input[type=url]:disabled::-moz-placeholder, input[type=url].disabled::-moz-placeholder, input[type=url][aria-disabled=true]::-moz-placeholder, input[type=week]:disabled::-moz-placeholder, input[type=week].disabled::-moz-placeholder, input[type=week][aria-disabled=true]::-moz-placeholder {
+    color: var(--text-disabled-color);
+  }
+  input:not([type]):disabled::placeholder, input:not([type]).disabled::placeholder, input:not([type])[aria-disabled=true]::placeholder,
+  input[type=date]:disabled::placeholder,
+  input[type=date].disabled::placeholder,
+  input[type=date][aria-disabled=true]::placeholder,
+  input[type=datetime]:disabled::placeholder,
+  input[type=datetime].disabled::placeholder,
+  input[type=datetime][aria-disabled=true]::placeholder,
+  input[type=datetime-local]:disabled::placeholder,
+  input[type=datetime-local].disabled::placeholder,
+  input[type=datetime-local][aria-disabled=true]::placeholder,
+  input[type=email]:disabled::placeholder,
+  input[type=email].disabled::placeholder,
+  input[type=email][aria-disabled=true]::placeholder,
+  input[type=month]:disabled::placeholder,
+  input[type=month].disabled::placeholder,
+  input[type=month][aria-disabled=true]::placeholder,
+  input[type=number]:disabled::placeholder,
+  input[type=number].disabled::placeholder,
+  input[type=number][aria-disabled=true]::placeholder,
+  input[type=password]:disabled::placeholder,
+  input[type=password].disabled::placeholder,
+  input[type=password][aria-disabled=true]::placeholder,
+  input[type=search]:disabled::placeholder,
+  input[type=search].disabled::placeholder,
+  input[type=search][aria-disabled=true]::placeholder,
+  input[type=tel]:disabled::placeholder,
+  input[type=tel].disabled::placeholder,
+  input[type=tel][aria-disabled=true]::placeholder,
+  input[type=text]:disabled::placeholder,
+  input[type=text].disabled::placeholder,
+  input[type=text][aria-disabled=true]::placeholder,
+  input[type=time]:disabled::placeholder,
+  input[type=time].disabled::placeholder,
+  input[type=time][aria-disabled=true]::placeholder,
+  input[type=url]:disabled::placeholder,
+  input[type=url].disabled::placeholder,
+  input[type=url][aria-disabled=true]::placeholder,
+  input[type=week]:disabled::placeholder,
+  input[type=week].disabled::placeholder,
+  input[type=week][aria-disabled=true]::placeholder {
+    color: var(--text-disabled-color);
+  }
+  input:not([type]):hover,
+  input[type=date]:hover,
+  input[type=datetime]:hover,
+  input[type=datetime-local]:hover,
+  input[type=email]:hover,
+  input[type=month]:hover,
+  input[type=number]:hover,
+  input[type=password]:hover,
+  input[type=search]:hover,
+  input[type=tel]:hover,
+  input[type=text]:hover,
+  input[type=time]:hover,
+  input[type=url]:hover,
+  input[type=week]:hover {
+    background-color: var(--gds-ref-pallet-base100);
+  }
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  :host {
+    display: block;
+    font-family: inherit;
+  }
+  :host(:invalid) [gds-element=gds-popover] + .form-info {
+    position: relative;
+    transition: all 200ms ease-in-out, outline-offset 0s, outline-width 0s;
+    color: var(--intent-danger-background);
+    opacity: 1;
+  }
+  :host(:invalid) [gds-element=gds-popover] + .form-info::before {
+    background: transparent;
+    border-radius: 0 0 4px 4px;
+    clip-path: inset(4px 0 0 0);
+    content: "";
+    display: block;
+    height: 4px;
+    position: absolute;
+    transform: translate3d(0, -12px, 0);
+    transition: 300ms ease-in-out;
+    width: 100%;
+  }
+  :host(:invalid) [gds-element=gds-popover] + .form-info::before {
+    background: var(--intent-danger-background);
+    clip-path: inset(1px 0 0 0);
+  }
+  ::slotted([slot=trigger]) {
+    overflow: hidden;
+  }
+  slot[name=trigger] > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    white-space: nowrap;
+  }
+  .form-info {
+    color: var(--text-primary-color);
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    width: 100%;
+  }
+  input[type=text] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    font-size: 1rem;
+    line-height: 1;
+    margin: -1px;
+    min-height: auto;
+    padding: 0.75rem;
+  }
+  input[type=text]:focus {
+    outline-offset: -0.25rem;
+  }
+  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;
+    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);
+    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);
+    --border-color: var(--grey-800);
+    --sg-border-color: var(--grey-800);
+    background: var(--sg-form-control-bg);
+    color: var(--text-primary-color);
+    min-height: 2.75rem;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    font-size: inherit;
+    font-weight: normal;
+    line-height: 1.125;
+    gap: 1ch;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+  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: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;
+  }
+  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);
+  }
+  button[aria-selected=true], button:active, button.active, button.active:hover, 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);
+  }
+  button:disabled, button.disabled, 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;
+  }
+  button:disabled::-moz-placeholder, button.disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder {
+    color: var(--text-disabled-color);
+  }
+  button:disabled::placeholder, button.disabled::placeholder, button[aria-disabled=true]::placeholder {
+    color: var(--text-disabled-color);
+  }
+  button:focus, button:focus {
+    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%;
+    }
+  }
+  button:not(:disabled, .disabled, [aria-disabled]):hover {
+    --background: var(--grey-400);
+    --color: var(--grey-1000);
+    background-color: var(--grey-400);
+    color: var(--grey-1000);
+    border-color: var(--grey-1000);
+  }
+  button > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  button::after {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    border-bottom: solid 2px var(--text-primary-color);
+    border-left: solid 2px var(--text-primary-color);
+    content: "";
+    display: block;
+    height: 0.5rem;
+    width: 0.5rem;
+    position: relative;
+    top: -0.15rem;
+    transform: translate(75%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, -1);
+    transition: transform 300ms ease-in;
+    flex-shrink: 0;
+  }
+  button[aria-expanded=true]::after {
+    transform: translate(75%, 6px) rotate3d(0, 0, 1, -45deg) scale3d(-1, -1, 1);
+  }
+  button:hover::after {
+    border-color: currentColor;
+  }
+  button.small {
+    font-size: 0.875rem;
+  }
+  button:hover {
+    background: var(--grey-400);
+  }
+  button::after {
+    display: none;
+  }
+  button .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    max-height: 24px;
+    max-width: 24px;
+  }
+  button[aria-expanded=true] ::part(icon) {
+    transform: scaleY(-1);
+  }
+  label {
+    display: block;
+    font-weight: 500;
+    line-height: 1.25rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
+  }
+}`;
+
+// libs/core/src/components/dropdown/dropdown.trans.styles.ts
+function register6() {
+  register();
+  register2();
+  register5();
+  TransitionalStyles.instance.register("gds-dropdown", dropdown_trans_styles_default.toString());
+}
+var dropdown_trans_styles_default2 = register6;
+
+// 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 */
+/* rules for groups of checkboxes and radio buttons*/
+@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host {
+    display: block;
+  }
+  label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    line-height: 1.25rem;
+  }
+  label + .field {
+    margin-top: 0.5rem;
+  }
+  .form-info {
+    color: var(--text-primary-color);
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    width: 100%;
+  }
+  .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;
+    background-color: var(--sg-form-control-bg);
+    box-sizing: border-box;
+    color: var(--sg-text-primary);
+    cursor: text;
+    display: flex;
+    justify-content: space-between;
+    margin: 0.5rem 0;
+    min-height: 2.75rem;
+  }
+  .field:hover {
+    background-color: var(--grey-200);
+  }
+  .field .input {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: var(--sg-border-radius);
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+  }
+  .field .input:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .field .input:focus, .field .input:focus-within {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  .field .input::-moz-selection, .field .input span::-moz-selection {
+    background: transparent;
+  }
+  .field .input::selection,
+  .field .input span::selection {
+    background: transparent;
+  }
+  .field ::part(_button) {
+    outline-offset: -4px;
+    background-color: transparent;
+    color: #000;
+    border: none;
+  }
+  .field ::part(_button):hover {
+    border-color: var(--grey-400);
+  }
+  .field .input.is-placeholder {
+    opacity: 0;
+  }
+  .field .input.is-placeholder:hover, .field .input.is-placeholder:focus, .field .input.is-placeholder:has(:focus) {
+    opacity: 0.7;
+  }
+  .field [role=spinbutton] {
+    display: inline-block;
+  }
+  .field [role=spinbutton]:focus {
+    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
+    outline: none;
+  }
+  .field [role=spinbutton]::-moz-selection {
+    background: transparent;
+  }
+  .field [role=spinbutton]::selection {
+    background: transparent;
+  }
+  .field button {
+    border-radius: var(--sg-border-radius);
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background: transparent;
+    border: 0;
+    box-sizing: border-box;
+    color: var(--text-primary-color);
+    cursor: pointer;
+    width: 2.75rem;
+    font-size: 1rem;
+  }
+  .field button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .field button:focus, .field button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  .field button:hover {
+    background: var(--grey-500);
+  }
+  .field.small {
+    font-size: 0.875rem;
+    min-height: 2rem;
+  }
+  :host(:invalid) .field + .form-info {
+    position: relative;
+    transition: all 200ms ease-in-out, outline-offset 0s, outline-width 0s;
+    color: var(--intent-danger-background);
+    opacity: 1;
+  }
+  :host(:invalid) .field + .form-info::before {
+    background: transparent;
+    border-radius: 0 0 4px 4px;
+    clip-path: inset(4px 0 0 0);
+    content: "";
+    display: block;
+    height: 4px;
+    position: absolute;
+    transform: translate3d(0, -12px, 0);
+    transition: 300ms ease-in-out;
+    width: 100%;
+  }
+  :host(:invalid) .field + .form-info::before {
+    background: var(--intent-danger-background);
+    clip-path: inset(1px 0 0 0);
+  }
+  .header {
+    padding-top: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    padding-inline: 5px;
+  }
+  @media (max-width: 35.98em) {
+    .header {
+      padding-top: 0;
+    }
+  }
+  .header > * {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+    min-width: auto;
+  }
+  .header > *.link {
+    flex: 1 1;
+  }
+  .header ::part(_button) {
+    border-radius: var(--sg-border-radius);
+    background-color: transparent;
+    border: 0;
+    color: var(--text-primary-color);
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0.5rem 0.75rem;
+  }
+  .header ::part(_button):focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .header ::part(_button):focus, .header ::part(_button):focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  .header ::part(_button):hover {
+    background: var(--grey-500);
+  }
+  .footer {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: solid var(--sg-border-width) var(--sg-border-color);
+    border-color: #ddd;
+    display: flex;
+    justify-content: space-between;
+  }
+}`;
+
+// libs/core/src/components/datepicker/datepicker.trans.styles.ts
+function register7() {
+  TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
+  register6();
+  register2();
+  register4();
+}
+var datepicker_trans_styles_default2 = register7;
+
+// 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 register8() {
+  TransitionalStyles.instance.register("gds-filter-chip", filter_chip_trans_styles_default.toString());
+  register5();
+}
+var filter_chip_trans_styles_default2 = register8;
+
+// 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 register9() {
+  TransitionalStyles.instance.register("gds-filter-chips", filter_chips_trans_styles_default.toString());
+  register8();
+}
+var filter_chips_trans_styles_default2 = register9;
+
+// 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 register10() {
+  TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
+}
+var grouped_list_trans_styles_default2 = register10;
+
+// 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 register11() {
+  TransitionalStyles.instance.register("gds-segmented", segment_trans_styles_default.toString());
+}
+var segment_trans_styles_default2 = register11;
+
+// 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 register12() {
+  TransitionalStyles.instance.register(
+    "gds-segmented-control",
+    segmented_control_trans_styles_default.toString()
+  );
+  register11();
+}
+var segmented_control_trans_styles_default2 = register12;
+
+// 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-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 register13() {
+  TransitionalStyles.instance.register(
+    "gds-theme",
+    chlorophyll_tokens_default.toString()
+  );
+}
+var theme_trans_styles_default = register13;
+
+// libs/core/src/utils/transitional-styles/transitional-styles.ts
+var registerTransitionalStyles = () => {
+  register13();
+  register6();
+  register3();
+  register7();
+  register10();
+  register12();
+  register9();
+  register5();
+};
+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;
+    }
+    .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);
+    }
+    .button.icon {
+      padding: 0.75rem;
+    }
+    .button.icon slot {
+      display: contents;
+    }
+    .button.icon.small {
+      padding: 0.5rem;
+    }
+    .button.icon.large {
+      padding: 1.25rem;
+    }
+    :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 {}
+}`;
+
+// libs/core/src/components/button/button.trans.styles.ts
+function register5() {
+  TransitionalStyles.instance.register("gds-button", button_trans_styles_default.toString());
+}
+var button_trans_styles_default2 = register5;
+
+export {
+  register5 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,
+  register6 as register5,
+  dropdown_trans_styles_default2 as dropdown_trans_styles_default,
+  register7 as register6,
+  datepicker_trans_styles_default2 as datepicker_trans_styles_default,
+  register8 as register7,
+  filter_chip_trans_styles_default2 as filter_chip_trans_styles_default,
+  register9 as register8,
+  filter_chips_trans_styles_default2 as filter_chips_trans_styles_default,
+  register10 as register9,
+  grouped_list_trans_styles_default2 as grouped_list_trans_styles_default,
+  register11 as register10,
+  segment_trans_styles_default2 as segment_trans_styles_default,
+  register12 as register11,
+  segmented_control_trans_styles_default2 as segmented_control_trans_styles_default,
+  register13 as register12,
+  theme_trans_styles_default,
+  registerTransitionalStyles,
+  TransitionalStyles
+};