@sebgroup/green-core 1.15.0 → 1.16.0

package/chunks/chunk.QONSFT2N.js

@@ -0,0 +1,4653 @@
+import {
+  VER_SUFFIX
+} from "./chunk.VOYMQ322.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/utils/transitional-styles/transitional-styles.ts
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+// libs/core/src/components/button/button.trans.styles.scss
+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;
+      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;
+      font-size: inherit;
+      overflow: hidden;
+    }
+    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:not(:disabled, .disabled, [aria-disabled]):hover {
+      background-color: #199be3;
+      color: rgb(255, 255, 255);
+      --background: #199be3;
+      --color: rgb(255, 255, 255);
+      border-color: #199be3;
+    }
+    button[aria-selected], 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:focus-visible {
+      background-color: #199be3;
+      color: rgb(255, 255, 255);
+      --background: #199be3;
+      --color: rgb(255, 255, 255);
+      border-color: #199be3 !important;
+    }
+    button:disabled, button.disabled, 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;
+    }
+    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.icon {
+      padding: 0.75rem;
+    }
+    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: #199be3;
+      color: rgb(255, 255, 255);
+      --background: #199be3;
+      --color: rgb(255, 255, 255);
+      border-color: #199be3;
+    }
+    :host([rank*=secondary]) button[aria-selected], :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: #199be3;
+      color: rgb(255, 255, 255);
+      --background: #199be3;
+      --color: rgb(255, 255, 255);
+      border-color: #199be3;
+    }
+    :host([rank*=tertiary]) button[aria-selected], :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], :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],
+    :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], :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],
+    :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);
+    }
+  }
+  @layer _overrides {}
+}`;
+
+// libs/core/src/components/button/button.trans.styles.ts
+function register() {
+  TransitionalStyles.instance.register("gds-button", button_trans_styles_default.toString());
+}
+
+// libs/core/src/primitives/calendar/calendar.trans.styles.scss
+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 table tr th,
+    :host table tr td {
+      box-sizing: border-box;
+      height: 2.75rem;
+      text-align: center;
+      width: 2.75rem;
+    }
+    :host table thead {
+      /* days */
+    }
+    :host table 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 table thead th {
+        position: sticky;
+      }
+    }
+    :host table tbody {
+      /* week numbers */
+      /* dates */
+    }
+    :host table tbody tr th {
+      font-weight: 400;
+    }
+    :host table tbody tr 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 table tbody tr td.sg-date-holiday:not(.disabled) {
+      background: var(--sg-bg-level-2);
+      color: hsl(var(--sg-hsl-red-2));
+    }
+    :host table tbody tr td.today {
+      background: transparent;
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 2px var(--grey-1000);
+      color: var(--grey-1000);
+    }
+    :host table tbody tr 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 table tbody tr td:focus-visible:focus:not(:focus-visible) {
+      box-shadow: none;
+      outline: 0;
+    }
+    :host table tbody tr td:focus-visible:focus, :host table tbody tr 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 table tbody tr td:focus-visible:not(.disabled) {
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      cursor: pointer;
+      position: relative;
+      z-index: 0;
+    }
+    :host table tbody tr 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 table tbody tr td[tabindex="0"] {
+      border-radius: 4px;
+    }
+    :host table tbody tr 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 table tbody tr 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 table tbody tr td.disabled.sg-date-holiday {
+      color: hsla(var(--sg-hsl-red-2), 0.25);
+    }
+    table {
+      flex-grow: 1;
+      width: 100%;
+    }
+  }
+  @layer _modifiers {
+    .week-number {
+      border-right: solid 1px var(--gds-ref-pallet-base300);
+      font-weight: 400;
+      pointer-events: none;
+    }
+  }
+}`;
+
+// libs/core/src/primitives/calendar/calendar.trans.styles.ts
+function register2() {
+  TransitionalStyles.instance.register("gds-calendar", calendar_trans_styles_default.toString());
+}
+
+// libs/core/src/components/context-menu/context-menu.trans.styles.scss
+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());
+}
+
+// libs/core/src/components/datepicker/datepicker.trans.styles.scss
+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 */
+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;
+}
+
+/* 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;
+  }
+  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 .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;
+  }
+  .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 button svg {
+    height: 1rem;
+    width: 1rem;
+  }
+  .field button svg > * {
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2px;
+  }
+  .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;
+    -webkit-clip-path: inset(4px 0 0 0);
+            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);
+    -webkit-clip-path: inset(1px 0 0 0);
+            clip-path: inset(1px 0 0 0);
+  }
+  .header {
+    padding-top: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+  }
+  @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 button {
+    border-radius: var(--sg-border-radius);
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    margin: 0.125rem 0.25rem;
+    padding: 0.5rem;
+    width: 2.75rem;
+  }
+  .header button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .header button:focus, .header button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  .header button:hover {
+    background: var(--grey-400);
+  }
+  .header button:focus-visible {
+    outline-offset: 0;
+  }
+  .header button .icon::before {
+    background: none;
+    border-bottom: 2px solid var(--grey-1000);
+    border-left: 2px solid var(--grey-1000);
+    content: "";
+    display: block;
+    height: 8px;
+    margin-top: 2px;
+    width: 8px;
+  }
+  .header button .icon.prev::before {
+    margin-left: 3px;
+    transform: translate(75%) rotate(45deg) scaleZ(-1);
+  }
+  .header button .icon.next::before {
+    margin-left: -1px;
+    transform: translate(75%) rotate(-135deg) scaleZ(-1);
+  }
+  .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;
+  }
+  .footer button {
+    border-radius: var(--sg-border-radius);
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background: transparent;
+    border: 0;
+    color: var(--intent-info-background);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: 500;
+    padding: 0.5rem 0.75rem;
+  }
+  .footer button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .footer button:focus, .footer button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  .footer button:hover {
+    background: var(--intent-info-background);
+    color: #fff;
+  }
+  .footer .clear {
+    margin-right: auto;
+  }
+}`;
+
+// libs/core/src/components/datepicker/datepicker.trans.styles.ts
+function register4() {
+  TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
+}
+
+// libs/core/src/components/dropdown/dropdown.trans.styles.scss
+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;
+  }
+  :host(:invalid) button + .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) button + .form-info::before {
+    background: transparent;
+    border-radius: 0 0 4px 4px;
+    -webkit-clip-path: inset(4px 0 0 0);
+            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) button + .form-info::before {
+    background: var(--intent-danger-background);
+    -webkit-clip-path: inset(1px 0 0 0);
+            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;
+  }
+  .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%;
+    font-size: inherit;
+    font-weight: normal;
+    line-height: 1.125;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+    width: 100%;
+  }
+  button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  button:focus, button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  @media (max-width: 35.98em) {
+    button {
+      min-width: 100%;
+    }
+  }
+  @media screen and (-ms-high-contrast: active) {
+    button {
+      border: 2px solid currentcolor;
+    }
+  }
+  button.small {
+    min-height: 2rem;
+    padding: 0.4375rem 0.75rem;
+    line-height: 1rem;
+  }
+  button.large {
+    min-height: 4rem;
+    padding: 1rem 1.5rem;
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  button: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: #199be3;
+    color: rgb(255, 255, 255);
+    --background: #199be3;
+    --color: rgb(255, 255, 255);
+    border-color: #199be3;
+  }
+  button[aria-selected], 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);
+  }
+  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 register5() {
+  TransitionalStyles.instance.register("gds-dropdown", dropdown_trans_styles_default.toString());
+}
+
+// libs/core/src/components/grouped-list/grouped-list.trans.styles.scss
+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 register6() {
+  TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
+}
+
+// libs/core/src/primitives/listbox/listbox.trans.styles.scss
+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
+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) div {
+    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);
+  }
+  .checkbox.checked {
+    background-color: var(--gds-comp-checkbox-container-color-selected);
+  }
+  .checkbox.checked::after {
+    border-bottom: 3px solid var(--gds-comp-checkbox-border-color-selected, #fff);
+    border-left: 3px solid var(--gds-comp-checkbox-border-color-selected, #fff);
+    content: "";
+    height: 0.5rem;
+    left: -1px;
+    position: absolute;
+    top: 0.05rem;
+    transform: scale(0.55) rotate(-45deg);
+    transform-origin: center center;
+    width: 1rem;
+  }
+}`;
+
+// libs/core/src/primitives/menu/menu-heading.trans.styles.scss
+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.ts
+function register7() {
+  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/primitives/popover/popover.trans.styles.scss
+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 */
+button,
+input[type=button],
+input[type=submit],
+input[type=reset],
+.button,
+.gds-filter-chip {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+}
+
+button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)),
+input:where([type=button], [type=submit], [type=reset]),
+.button {
+  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;
+}
+button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus:not(:focus-visible),
+input:where([type=button], [type=submit], [type=reset]):focus:not(:focus-visible),
+.button:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus, button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus-visible,
+input:where([type=button], [type=submit], [type=reset]):focus,
+input:where([type=button], [type=submit], [type=reset]):focus-visible,
+.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:where(:not(.link,
+  .close,
+  .sg-table-sort,
+  [aria-haspopup=listbox],
+  [aria-haspopup=menu],
+  [role=switch],
+  .gds-filter-chip)),
+  input:where([type=button], [type=submit], [type=reset]),
+  .button {
+    min-width: 100%;
+  }
+}
+@media screen and (-ms-high-contrast: active) {
+  button:where(:not(.link,
+  .close,
+  .sg-table-sort,
+  [aria-haspopup=listbox],
+  [aria-haspopup=menu],
+  [role=switch],
+  .gds-filter-chip)),
+  input:where([type=button], [type=submit], [type=reset]),
+  .button {
+    border: 2px solid currentcolor;
+  }
+}
+button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).small,
+input:where([type=button], [type=submit], [type=reset]).small,
+.button.small {
+  min-height: 2rem;
+  padding: 0.4375rem 0.75rem;
+  line-height: 1rem;
+}
+button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).large,
+input:where([type=button], [type=submit], [type=reset]).large,
+.button.large {
+  min-height: 4rem;
+  padding: 1rem 1.5rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)),
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)),
+button.secondary,
+a.button.secondary,
+input:is([type=button], [type=reset]),
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])),
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)) {
+  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);
+}
+button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus:not(:focus-visible),
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible),
+button.secondary:focus:not(:focus-visible),
+a.button.secondary:focus:not(:focus-visible),
+input:is([type=button], [type=reset]):focus:not(:focus-visible),
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):focus:not(:focus-visible),
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible,
+button.secondary:focus,
+button.secondary:focus-visible,
+a.button.secondary:focus,
+a.button.secondary:focus-visible,
+input:is([type=button], [type=reset]):focus,
+input:is([type=button], [type=reset]):focus-visible,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):focus,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):focus-visible,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):not(:disabled, .disabled, [aria-disabled]):hover,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):not(:disabled, .disabled, [aria-disabled]):hover,
+button.secondary:not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.secondary:not(:disabled, .disabled, [aria-disabled]):hover,
+input:is([type=button], [type=reset]):not(:disabled, .disabled, [aria-disabled]):hover,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):not(:disabled, .disabled, [aria-disabled]):hover,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):not(:disabled, .disabled, [aria-disabled]):hover {
+  background-color: #199be3;
+  color: rgb(255, 255, 255);
+  --background: #199be3;
+  --color: rgb(255, 255, 255);
+  border-color: #199be3;
+}
+button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-selected], button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):active, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).active, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).active:hover, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):active:hover,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-selected],
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):active,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active:hover,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):active:hover,
+button.secondary[aria-selected],
+button.secondary:active,
+button.secondary.active,
+button.secondary.active:hover,
+button.secondary:active:hover,
+a.button.secondary[aria-selected],
+a.button.secondary:active,
+a.button.secondary.active,
+a.button.secondary.active:hover,
+a.button.secondary:active:hover,
+input:is([type=button], [type=reset])[aria-selected],
+input:is([type=button], [type=reset]):active,
+input:is([type=button], [type=reset]).active,
+input:is([type=button], [type=reset]).active:hover,
+input:is([type=button], [type=reset]):active:hover,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu]))[aria-selected],
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):active,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])).active,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])).active:hover,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):active:hover,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-selected],
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):active,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active:hover,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):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:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):disabled, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).disabled, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-disabled=true],
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true],
+button.secondary:disabled,
+button.secondary.disabled,
+button.secondary[aria-disabled=true],
+a.button.secondary:disabled,
+a.button.secondary.disabled,
+a.button.secondary[aria-disabled=true],
+input:is([type=button], [type=reset]):disabled,
+input:is([type=button], [type=reset]).disabled,
+input:is([type=button], [type=reset])[aria-disabled=true],
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):disabled,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])).disabled,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu]))[aria-disabled=true],
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[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:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):disabled::-moz-placeholder, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).disabled::-moz-placeholder, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-disabled=true]::-moz-placeholder, a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled::-moz-placeholder, a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled::-moz-placeholder, a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true]::-moz-placeholder, button.secondary:disabled::-moz-placeholder, button.secondary.disabled::-moz-placeholder, button.secondary[aria-disabled=true]::-moz-placeholder, a.button.secondary:disabled::-moz-placeholder, a.button.secondary.disabled::-moz-placeholder, a.button.secondary[aria-disabled=true]::-moz-placeholder, input:is([type=button], [type=reset]):disabled::-moz-placeholder, input:is([type=button], [type=reset]).disabled::-moz-placeholder, input:is([type=button], [type=reset])[aria-disabled=true]::-moz-placeholder, button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):disabled::-moz-placeholder, button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])).disabled::-moz-placeholder, button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu]))[aria-disabled=true]::-moz-placeholder, button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled::-moz-placeholder, button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled::-moz-placeholder, button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true]::-moz-placeholder {
+  color: var(--text-disabled-color);
+}
+button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):disabled::placeholder, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).disabled::placeholder, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-disabled=true]::placeholder,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled::placeholder,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled::placeholder,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true]::placeholder,
+button.secondary:disabled::placeholder,
+button.secondary.disabled::placeholder,
+button.secondary[aria-disabled=true]::placeholder,
+a.button.secondary:disabled::placeholder,
+a.button.secondary.disabled::placeholder,
+a.button.secondary[aria-disabled=true]::placeholder,
+input:is([type=button], [type=reset]):disabled::placeholder,
+input:is([type=button], [type=reset]).disabled::placeholder,
+input:is([type=button], [type=reset])[aria-disabled=true]::placeholder,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])):disabled::placeholder,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu])).disabled::placeholder,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
+[aria-haspopup=menu]))[aria-disabled=true]::placeholder,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled::placeholder,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled::placeholder,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true]::placeholder {
+  color: var(--text-disabled-color);
+}
+
+button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)),
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)),
+button.tertiary,
+a.button.tertiary {
+  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);
+}
+button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus:not(:focus-visible),
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary:focus:not(:focus-visible),
+a.button.tertiary:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
+button.tertiary:focus,
+button.tertiary:focus-visible,
+a.button.tertiary:focus,
+a.button.tertiary:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):not(:disabled, .disabled, [aria-disabled]):hover,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):not(:disabled, .disabled, [aria-disabled]):hover,
+button.tertiary:not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.tertiary:not(:disabled, .disabled, [aria-disabled]):hover {
+  background-color: #199be3;
+  color: rgb(255, 255, 255);
+  --background: #199be3;
+  --color: rgb(255, 255, 255);
+  border-color: #199be3;
+}
+button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-selected], button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):active, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).active, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).active:hover, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):active:hover,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link))[aria-selected],
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):active,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)).active,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)).active:hover,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):active:hover,
+button.tertiary[aria-selected],
+button.tertiary:active,
+button.tertiary.active,
+button.tertiary.active:hover,
+button.tertiary:active:hover,
+a.button.tertiary[aria-selected],
+a.button.tertiary:active,
+a.button.tertiary.active,
+a.button.tertiary.active:hover,
+a.button.tertiary: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:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):disabled, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).disabled, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-disabled=true],
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):disabled,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)).disabled,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link))[aria-disabled=true],
+button.tertiary:disabled,
+button.tertiary.disabled,
+button.tertiary[aria-disabled=true],
+a.button.tertiary:disabled,
+a.button.tertiary.disabled,
+a.button.tertiary[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:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):disabled::-moz-placeholder, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).disabled::-moz-placeholder, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-disabled=true]::-moz-placeholder, a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):disabled::-moz-placeholder, a.button:where(:not(.primary, .secondary, .ghost, .close, .link)).disabled::-moz-placeholder, a.button:where(:not(.primary, .secondary, .ghost, .close, .link))[aria-disabled=true]::-moz-placeholder, button.tertiary:disabled::-moz-placeholder, button.tertiary.disabled::-moz-placeholder, button.tertiary[aria-disabled=true]::-moz-placeholder, a.button.tertiary:disabled::-moz-placeholder, a.button.tertiary.disabled::-moz-placeholder, a.button.tertiary[aria-disabled=true]::-moz-placeholder {
+  color: var(--text-disabled-color);
+}
+button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)):disabled::placeholder, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip)).disabled::placeholder, button:where(:not(.primary,
+.secondary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
+.gds-filter-chip))[aria-disabled=true]::placeholder,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):disabled::placeholder,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)).disabled::placeholder,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link))[aria-disabled=true]::placeholder,
+button.tertiary:disabled::placeholder,
+button.tertiary.disabled::placeholder,
+button.tertiary[aria-disabled=true]::placeholder,
+a.button.tertiary:disabled::placeholder,
+a.button.tertiary.disabled::placeholder,
+a.button.tertiary[aria-disabled=true]::placeholder {
+  color: var(--text-disabled-color);
+}
+
+button.primary,
+input[type=submit],
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip),
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link),
+a.button.primary {
+  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;
+}
+button.primary:not(:disabled, .disabled, [aria-disabled]):hover,
+input[type=submit]:not(:disabled, .disabled, [aria-disabled]):hover,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):not(:disabled, .disabled, [aria-disabled]):hover,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.primary:not(:disabled, .disabled, [aria-disabled]):hover {
+  background-color: #199be3;
+  color: rgb(255, 255, 255);
+  --background: #199be3;
+  --color: rgb(255, 255, 255);
+  border-color: #199be3;
+}
+button.primary[aria-selected], button.primary:active, button.primary.active, button.primary.active:hover, button.primary:active:hover,
+input[type=submit][aria-selected],
+input[type=submit]:active,
+input[type=submit].active,
+input[type=submit].active:hover,
+input[type=submit]:active:hover,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip)[aria-selected],
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):active,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip).active,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip).active:hover,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):active:hover,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link)[aria-selected],
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):active,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link).active,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link).active:hover,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):active:hover,
+a.button.primary[aria-selected],
+a.button.primary:active,
+a.button.primary.active,
+a.button.primary.active:hover,
+a.button.primary: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.primary:focus-visible,
+input[type=submit]:focus-visible,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):focus-visible,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):focus-visible,
+a.button.primary:focus-visible {
+  background-color: #199be3;
+  color: rgb(255, 255, 255);
+  --background: #199be3;
+  --color: rgb(255, 255, 255);
+  border-color: #199be3 !important;
+}
+button.primary:disabled, button.primary.disabled, button.primary[aria-disabled=true],
+input[type=submit]:disabled,
+input[type=submit].disabled,
+input[type=submit][aria-disabled=true],
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):disabled,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip).disabled,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip)[aria-disabled=true],
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):disabled,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link).disabled,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link)[aria-disabled=true],
+a.button.primary:disabled,
+a.button.primary.disabled,
+a.button.primary[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;
+}
+button.primary:disabled::-moz-placeholder, button.primary.disabled::-moz-placeholder, button.primary[aria-disabled=true]::-moz-placeholder, input[type=submit]:disabled::-moz-placeholder, input[type=submit].disabled::-moz-placeholder, input[type=submit][aria-disabled=true]::-moz-placeholder, button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):disabled::-moz-placeholder, button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip).disabled::-moz-placeholder, button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip)[aria-disabled=true]::-moz-placeholder, input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):disabled::-moz-placeholder, input[type=submit]:not(.secondary, .ghost, .danger, .close, .link).disabled::-moz-placeholder, input[type=submit]:not(.secondary, .ghost, .danger, .close, .link)[aria-disabled=true]::-moz-placeholder, a.button.primary:disabled::-moz-placeholder, a.button.primary.disabled::-moz-placeholder, a.button.primary[aria-disabled=true]::-moz-placeholder {
+  color: var(--text-disabled-color);
+}
+button.primary:disabled::placeholder, button.primary.disabled::placeholder, button.primary[aria-disabled=true]::placeholder,
+input[type=submit]:disabled::placeholder,
+input[type=submit].disabled::placeholder,
+input[type=submit][aria-disabled=true]::placeholder,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip):disabled::placeholder,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip).disabled::placeholder,
+button[type=submit]:not(.secondary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip)[aria-disabled=true]::placeholder,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link):disabled::placeholder,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link).disabled::placeholder,
+input[type=submit]:not(.secondary, .ghost, .danger, .close, .link)[aria-disabled=true]::placeholder,
+a.button.primary:disabled::placeholder,
+a.button.primary.disabled::placeholder,
+a.button.primary[aria-disabled=true]::placeholder {
+  color: var(--text-disabled-color);
+}
+
+button.ghost,
+.button.ghost {
+  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);
+}
+button.ghost:not(:disabled, .disabled, [aria-disabled]):hover,
+.button.ghost: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);
+}
+button.ghost[aria-selected], button.ghost:active, button.ghost.active, button.ghost.active:hover, button.ghost:active:hover,
+.button.ghost[aria-selected],
+.button.ghost:active,
+.button.ghost.active,
+.button.ghost.active:hover,
+.button.ghost: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);
+}
+button.ghost[aria-selected]:hover, button.ghost.active:hover, button.ghost:active:hover,
+.button.ghost[aria-selected]:hover,
+.button.ghost.active:hover,
+.button.ghost:active:hover {
+  opacity: 0.9;
+}
+button.ghost:focus-visible,
+.button.ghost: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;
+}
+button.ghost:disabled, button.ghost.disabled, button.ghost[aria-disabled=true],
+.button.ghost:disabled,
+.button.ghost.disabled,
+.button.ghost[aria-disabled=true] {
+  color: var(--text-disabled-color) !important;
+  border-color: var(--border-disabled-color) !important;
+  cursor: not-allowed;
+}
+button.ghost:disabled::-moz-placeholder, button.ghost.disabled::-moz-placeholder, button.ghost[aria-disabled=true]::-moz-placeholder, .button.ghost:disabled::-moz-placeholder, .button.ghost.disabled::-moz-placeholder, .button.ghost[aria-disabled=true]::-moz-placeholder {
+  color: var(--text-disabled-color);
+}
+button.ghost:disabled::placeholder, button.ghost.disabled::placeholder, button.ghost[aria-disabled=true]::placeholder,
+.button.ghost:disabled::placeholder,
+.button.ghost.disabled::placeholder,
+.button.ghost[aria-disabled=true]::placeholder {
+  color: var(--text-disabled-color);
+}
+
+button.icon,
+.button.icon {
+  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);
+}
+.form-group button.icon,
+.form-group .button.icon {
+  margin-top: -0.625rem;
+}
+button.icon.small,
+.button.icon.small {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.4375rem;
+  line-height: 1.125rem;
+}
+button.icon svg,
+.button.icon svg {
+  height: 1rem;
+  width: 1rem;
+}
+button.icon path,
+button.icon line,
+button.icon circle,
+button.icon rect,
+button.icon ellipse,
+button.icon polyline,
+button.icon text,
+.button.icon path,
+.button.icon line,
+.button.icon circle,
+.button.icon rect,
+.button.icon ellipse,
+.button.icon polyline,
+.button.icon 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.icon:hover, button.icon.highlighted,
+.button.icon:hover,
+.button.icon.highlighted {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-color: transparent;
+}
+button.icon:active, button.icon.highlighted:hover,
+.button.icon:active,
+.button.icon.highlighted:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
+}
+
+button.primary.danger,
+.button.primary.danger,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link),
+input[type=submit].danger:not(.secondary, .ghost, .close, .link) {
+  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;
+}
+button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
+.button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):not(:disabled, .disabled, [aria-disabled]):hover,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):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);
+}
+button.primary.danger[aria-selected], button.primary.danger:active, button.primary.danger.active, button.primary.danger.active:hover, button.primary.danger:active:hover,
+.button.primary.danger[aria-selected],
+.button.primary.danger:active,
+.button.primary.danger.active,
+.button.primary.danger.active:hover,
+.button.primary.danger:active:hover,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-selected],
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):active,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link).active,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):active:hover,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-selected],
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):active,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link).active,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):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);
+}
+button.primary.danger[aria-selected]:hover, button.primary.danger.active:hover, button.primary.danger:active:hover,
+.button.primary.danger[aria-selected]:hover,
+.button.primary.danger.active:hover,
+.button.primary.danger:active:hover,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-selected]:hover,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):active:hover,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-selected]:hover,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):active:hover {
+  opacity: 0.9;
+}
+button.primary.danger:focus:not(:focus-visible),
+.button.primary.danger:focus:not(:focus-visible),
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible),
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+button.primary.danger:focus, button.primary.danger:focus-visible,
+.button.primary.danger:focus,
+.button.primary.danger:focus-visible,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+button.primary.danger:disabled, button.primary.danger.disabled, button.primary.danger[aria-disabled=true],
+.button.primary.danger:disabled,
+.button.primary.danger.disabled,
+.button.primary.danger[aria-disabled=true],
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):disabled,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link).disabled,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-disabled=true],
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):disabled,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link).disabled,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link)[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;
+}
+button.primary.danger:disabled::-moz-placeholder, button.primary.danger.disabled::-moz-placeholder, button.primary.danger[aria-disabled=true]::-moz-placeholder, .button.primary.danger:disabled::-moz-placeholder, .button.primary.danger.disabled::-moz-placeholder, .button.primary.danger[aria-disabled=true]::-moz-placeholder, button[type=submit].danger:not(.secondary, .ghost, .close, .link):disabled::-moz-placeholder, button[type=submit].danger:not(.secondary, .ghost, .close, .link).disabled::-moz-placeholder, button[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-disabled=true]::-moz-placeholder, input[type=submit].danger:not(.secondary, .ghost, .close, .link):disabled::-moz-placeholder, input[type=submit].danger:not(.secondary, .ghost, .close, .link).disabled::-moz-placeholder, input[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-disabled=true]::-moz-placeholder {
+  color: var(--text-disabled-color);
+}
+button.primary.danger:disabled::placeholder, button.primary.danger.disabled::placeholder, button.primary.danger[aria-disabled=true]::placeholder,
+.button.primary.danger:disabled::placeholder,
+.button.primary.danger.disabled::placeholder,
+.button.primary.danger[aria-disabled=true]::placeholder,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):disabled::placeholder,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link).disabled::placeholder,
+button[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-disabled=true]::placeholder,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):disabled::placeholder,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link).disabled::placeholder,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link)[aria-disabled=true]::placeholder {
+  color: var(--text-disabled-color);
+}
+
+button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])),
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)),
+button.secondary.danger,
+a.button.secondary.danger,
+input.danger:is([type=button], [type=reset]),
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])),
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)) {
+  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;
+}
+button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):not(:disabled, .disabled, [aria-disabled]):hover,
+button.secondary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.secondary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
+input.danger:is([type=button], [type=reset]):not(:disabled, .disabled, [aria-disabled]):hover,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):not(:disabled, .disabled, [aria-disabled]):hover,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):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);
+}
+button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch]))[aria-selected], button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):active, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])).active, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])).active:hover, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):active:hover,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link))[aria-selected],
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):active,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)).active,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)).active:hover,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):active:hover,
+button.secondary.danger[aria-selected],
+button.secondary.danger:active,
+button.secondary.danger.active,
+button.secondary.danger.active:hover,
+button.secondary.danger:active:hover,
+a.button.secondary.danger[aria-selected],
+a.button.secondary.danger:active,
+a.button.secondary.danger.active,
+a.button.secondary.danger.active:hover,
+a.button.secondary.danger:active:hover,
+input.danger:is([type=button], [type=reset])[aria-selected],
+input.danger:is([type=button], [type=reset]):active,
+input.danger:is([type=button], [type=reset]).active,
+input.danger:is([type=button], [type=reset]).active:hover,
+input.danger:is([type=button], [type=reset]):active:hover,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu]))[aria-selected],
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):active,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])).active,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])).active:hover,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):active:hover,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-selected],
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):active,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active:hover,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):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);
+}
+button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch]))[aria-selected]:hover, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])).active:hover, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):active:hover,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link))[aria-selected]:hover,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)).active:hover,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):active:hover,
+button.secondary.danger[aria-selected]:hover,
+button.secondary.danger.active:hover,
+button.secondary.danger:active:hover,
+a.button.secondary.danger[aria-selected]:hover,
+a.button.secondary.danger.active:hover,
+a.button.secondary.danger:active:hover,
+input.danger:is([type=button], [type=reset])[aria-selected]:hover,
+input.danger:is([type=button], [type=reset]).active:hover,
+input.danger:is([type=button], [type=reset]):active:hover,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu]))[aria-selected]:hover,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])).active:hover,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):active:hover,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-selected]:hover,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).active:hover,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):active:hover {
+  opacity: 0.9;
+}
+button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.secondary.danger:focus:not(:focus-visible),
+a.button.secondary.danger:focus:not(:focus-visible),
+input.danger:is([type=button], [type=reset]):focus:not(:focus-visible),
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus:not(:focus-visible),
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus-visible,
+button.secondary.danger:focus,
+button.secondary.danger:focus-visible,
+a.button.secondary.danger:focus,
+a.button.secondary.danger:focus-visible,
+input.danger:is([type=button], [type=reset]):focus,
+input.danger:is([type=button], [type=reset]):focus-visible,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus,
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus-visible,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+
+button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])),
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)),
+button.tertiary.danger,
+a.button.tertiary.danger {
+  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;
+}
+button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):not(:disabled, .disabled, [aria-disabled]):hover,
+button.tertiary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
+a.button.tertiary.danger: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);
+}
+button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch]))[aria-selected], button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):active, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])).active, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])).active:hover, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):active:hover,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link))[aria-selected],
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):active,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)).active,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)).active:hover,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):active:hover,
+button.tertiary.danger[aria-selected],
+button.tertiary.danger:active,
+button.tertiary.danger.active,
+button.tertiary.danger.active:hover,
+button.tertiary.danger:active:hover,
+a.button.tertiary.danger[aria-selected],
+a.button.tertiary.danger:active,
+a.button.tertiary.danger.active,
+a.button.tertiary.danger.active:hover,
+a.button.tertiary.danger: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);
+}
+button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch]))[aria-selected]:hover, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])).active:hover, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):active:hover,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link))[aria-selected]:hover,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)).active:hover,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):active:hover,
+button.tertiary.danger[aria-selected]:hover,
+button.tertiary.danger.active:hover,
+button.tertiary.danger:active:hover,
+a.button.tertiary.danger[aria-selected]:hover,
+a.button.tertiary.danger.active:hover,
+a.button.tertiary.danger:active:hover {
+  opacity: 0.9;
+}
+button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary.danger:focus:not(:focus-visible),
+a.button.tertiary.danger:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
+button.tertiary.danger:focus,
+button.tertiary.danger:focus-visible,
+a.button.tertiary.danger:focus,
+a.button.tertiary.danger:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+
+.close {
+  /* smartphones, touchscreens */
+  font-size: 0;
+  background: hsla(var(--background-hsl), 0);
+  border: 0;
+  border-radius: 50%;
+  content: "";
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  height: 2rem;
+  position: relative;
+  width: 2rem;
+}
+@media (hover: none) and (pointer: coarse) {
+  .close:not(:disabled):not(.disabled) {
+    padding: 0.375rem;
+    height: 2.75rem;
+    width: 2.75rem;
+  }
+  .close:not(:disabled):not(.disabled) > i {
+    background: var(--gds-ref-pallet-base200);
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+    position: relative;
+    --color: var(--gds-sys-color-base);
+  }
+  .close:not(:disabled):not(.disabled) > div::after, .close:not(:disabled):not(.disabled) > div::before {
+    height: 0.789375rem;
+    width: 0.130625rem;
+    top: 0.625rem;
+  }
+}
+.close:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+.close:focus, .close:focus-visible i {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+.close > i {
+  border-radius: var(--gds-sys-shape-corner-round);
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.close > i::after, .close > i::before {
+  background: var(--gds-sys-color-font);
+  content: "";
+  display: block;
+  height: 0.789375rem;
+  width: 0.130625rem;
+  border-radius: 0.5px;
+  left: calc(50% - 0.0625rem);
+  position: absolute;
+  top: 0.625rem;
+}
+.close > i::after {
+  transform: rotateZ(45deg);
+}
+.close > i::before {
+  transform: rotateZ(-45deg);
+}
+.close > svg path {
+  fill: var(--gds-sys-color-font);
+}
+@media (min-width: 48em) {
+  .close:not(:disabled, .disabled):hover > i {
+    background: color-mix(in srgb, var(--gds-sys-color-font) 10%, transparent);
+  }
+  .close:not(:disabled, .disabled):hover:active > i {
+    background: color-mix(in srgb, var(--gds-sys-color-font) 20%, transparent);
+  }
+}
+
+@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host([open]) dialog {
+    box-sizing: border-box;
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+  header {
+    display: flex;
+  }
+  @media (min-width: 36em) {
+    header {
+      display: none;
+    }
+  }
+  header button.close {
+    margin: 0;
+    padding: 0;
+  }
+  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);
+    max-height: calc(100% - 1rem);
+    background-color: var(--sg-popover-background);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    opacity: 0;
+    position: fixed;
+    visibility: hidden;
+    z-index: var(--z-index);
+    color: var(--text-primary-color);
+    inset: 0;
+    overflow: hidden;
+    padding: 0;
+    right: 0;
+  }
+  @media (max-width: 35.98em) {
+    dialog {
+      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;
+      box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
+      left: 0;
+      transition: all 300ms ease-in-out;
+      width: 100%;
+    }
+  }
+  @media (min-width: 36em) {
+    dialog {
+      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);
+      max-height: 500px;
+      box-shadow: var(--sg-popover-box-shadow);
+      min-width: 90px;
+      position: absolute;
+    }
+  }
+  dialog > [role=listbox] {
+    width: 100%;
+    overflow-y: auto;
+  }
+  dialog.active {
+    opacity: 1;
+    visibility: visible;
+  }
+  dialog .close {
+    margin: 0.25rem;
+    flex-shrink: 0;
+    align-self: flex-end;
+  }
+  @media (min-width: 36em) {
+    dialog .close {
+      display: none;
+    }
+  }
+  @media (max-width: 35.98em) {
+    dialog {
+      border: 1px solid var(--border-color);
+      border-radius: 0.25rem;
+      max-height: 80svh;
+      padding-bottom: 0;
+    }
+    dialog.v-kb-visible {
+      inset-block-end: auto;
+      max-height: 50svh;
+      top: 1rem;
+    }
+  }
+  @media (min-width: 36em) {
+    dialog {
+      inset: auto;
+      position: fixed;
+    }
+  }
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.2);
+    display: block;
+    position: fixed;
+  }
+  @media (min-width: 36em) {
+    dialog::backdrop {
+      opacity: 0;
+    }
+  }
+}`;
+
+// libs/core/src/primitives/popover/popover.trans.styles.ts
+function register8() {
+  TransitionalStyles.instance.register("gds-popover", popover_trans_styles_default.toString());
+}
+
+// libs/core/src/components/segmented-control/segment/segment.trans.styles.css
+var segment_trans_styles_default = `@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(--gds-sys-color-content-content);
+      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%;
+    }
+
+    @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;
+    }
+  }
+}
+`;
+
+// libs/core/src/components/segmented-control/segment/segment.trans.styles.ts
+function register9() {
+  TransitionalStyles.instance.register("gds-segmented", segment_trans_styles_default.toString());
+}
+
+// libs/core/src/components/segmented-control/segmented-control.trans.styles.css
+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;
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+    }
+
+    #segments {
+      box-sizing: border-box;
+      display: inline-flex;
+      position: relative;
+      transition: 0.2s;
+      z-index: 1;
+    }
+
+    #segments > * {
+      flex: 1 1 auto;
+    }
+
+    #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;
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: var(--grey-400);
+        }
+      }
+    }
+
+    #btn-prev {
+      border-right: 1px solid #333;
+    }
+
+    :host([size='small']) #btn-prev,
+    :host([size='small']) #btn-next {
+      width: 2rem;
+    }
+
+    ::slotted(*) {
+      flex-grow: 1;
+      flex-shrink: 0;
+      z-index: 1;
+    }
+
+    #indicator {
+      display: none;
+    }
+  }
+
+  /* @layer _overrides {
+  } */
+}
+`;
+
+// libs/core/src/components/segmented-control/segmented-control.trans.styles.ts
+function register10() {
+  TransitionalStyles.instance.register(
+    "gds-segmented-control",
+    segmented_control_trans_styles_default.toString()
+  );
+}
+
+// libs/core/src/components/theme/chlorophyll-tokens.scss
+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([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);
+  /******************************************/
+  /*********** Component Tokens *************/
+  /******************************************/
+  --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);
+  /*  @media (prefers-color-scheme: dark) {
+    --gds-comp-checkbox-container-color: var(--gds-sys-color-base-container);
+    --gds-comp-checkbox-border-color: transparent;
+    --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-blue);
+    --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-blue-dark-2);
+    --gds-comp-checkbox-border-color-selected: var(--gds-ref-pallet-base000);
+  }
+
+  .light {
+    --gds-comp-checkbox-container-color: var(--gds-sys-color-surface);
+    --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);
+  }*/
+  --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: #308602;
+  --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 register11() {
+  TransitionalStyles.instance.register(
+    "gds-theme",
+    chlorophyll_tokens_default.toString()
+  );
+}
+
+// libs/core/src/utils/transitional-styles/transitional-styles.ts
+var registerTransitionalStyles = () => {
+  register11();
+  register5();
+  register7();
+  register8();
+  register3();
+  register2();
+  register4();
+  register6();
+  register10();
+  register9();
+  register();
+};
+function supportsConstructedStylesheets() {
+  try {
+    new CSSStyleSheet();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+var TransitionalStyles = class _TransitionalStyles {
+  constructor() {
+    this.sheets = /* @__PURE__ */ new Map();
+    this.elements = /* @__PURE__ */ new Map();
+    this.sheetsLegacy = /* @__PURE__ */ new Map();
+    this.useLegacyStylesheets = !supportsConstructedStylesheets();
+    this.chlorophyllTokens = new CSSStyleSheet();
+  }
+  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;
+    if (this.useLegacyStylesheets) {
+      this.elements.set(styleKey, element);
+      this.applyToElementLegacy(styleKey);
+      return;
+    }
+    const sheet = this.sheets.get(styleKey);
+    if (!sheet)
+      return;
+    this.elements.set(styleKey, element);
+    this.applyToElement(styleKey, sheet);
+  }
+  applyToElement(styleKey, sheet) {
+    const element = this.elements.get(styleKey);
+    if (!element || !element.shadowRoot)
+      return;
+    element.shadowRoot.adoptedStyleSheets = [this.chlorophyllTokens, sheet];
+    element._isUsingTransitionalStyles = true;
+  }
+  // This is a fallback for browsers that dosen't support constructed stylesheets.
+  // Primarily, this is here to support Safari/iOS 15.x
+  //
+  // To work around the lack of Constructed Stylesheets, we use a regular <style>
+  // element instead. The _tStyles property needs to be added to the render template
+  // of each component.
+  //
+  // Lit itself will also add a <style> element to the shadow root in these browsers,
+  // meaning that we have to override the base styles added from the static style
+  // property in this case. This is what the `all: revert` rule is for.
+  // We can use cascade layers to ensure that the revert rule overides the base styles
+  // but not the transitional styles.
+  // `@layer base, reset, transitional-styles;`
+  applyToElementLegacy(styleKey) {
+    const sheet = this.sheetsLegacy.get(styleKey);
+    const element = this.elements.get(styleKey);
+    if (!element)
+      return;
+    element._tStyles = html`<style>
+      @layer reset {
+        *:not(style, [gds-element]) {
+          all: revert;
+        }
+      }
+      ${unsafeHTML(sheet)}
+    </style>`;
+    element._isUsingTransitionalStyles = true;
+  }
+  register(name, styles) {
+    if (this.useLegacyStylesheets) {
+      this.sheetsLegacy.set(name, styles);
+      this.applyToElementLegacy(name);
+      return;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(styles);
+    this.sheets.set(name, sheet);
+    this.applyToElement(name, sheet);
+  }
+};
+
+export {
+  registerTransitionalStyles,
+  TransitionalStyles
+};