@knime/product-features 0.1.0

package/dist/nodes.css

@@ -0,0 +1,4513 @@
+
+.kds-avatar {
+&[data-v-9e1a5abe] {
+  display: inline-block;
+  flex-shrink: 0;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  vertical-align: middle;
+  outline: 1px solid var(--kds-color-border-muted);
+  outline-offset: -1px;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+&.small[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-icon-0-75x);
+    block-size: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-icon-1x);
+    block-size: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-component-width-1-25x);
+    block-size: var(--kds-dimension-component-height-1-25x);
+}
+&.xlarge[data-v-9e1a5abe] {
+    inline-size: var(--kds-dimension-component-width-1-5x);
+    block-size: var(--kds-dimension-component-height-1-5x);
+}
+&[data-color="red"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-red);
+    background: var(--kds-color-avatar-background-red);
+}
+&[data-color="orange"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-orange);
+    background: var(--kds-color-avatar-background-orange);
+}
+&[data-color="yellow"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-yellow);
+    background: var(--kds-color-avatar-background-yellow);
+}
+&[data-color="green"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-green);
+    background: var(--kds-color-avatar-background-green);
+}
+&[data-color="teal"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-teal);
+    background: var(--kds-color-avatar-background-teal);
+}
+&[data-color="blue"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-blue);
+    background: var(--kds-color-avatar-background-blue);
+}
+&[data-color="purple"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-purple);
+    background: var(--kds-color-avatar-background-purple);
+}
+&[data-color="aquamarine"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-aquamarine);
+    background: var(--kds-color-avatar-background-aquamarine);
+}
+&[data-color="grassgreen"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-grassgreen);
+    background: var(--kds-color-avatar-background-grassgreen);
+}
+&[data-color="brown"][data-v-9e1a5abe] {
+    color: var(--kds-color-avatar-text-and-icon-brown);
+    background: var(--kds-color-avatar-background-brown);
+}
+&[data-color="empty"][data-v-9e1a5abe] {
+    color: transparent;
+    background-color: var(--kds-color-avatar-background-empty);
+}
+}
+.kds-avatar-image[data-v-9e1a5abe] {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.kds-avatar-initials[data-v-9e1a5abe] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  container-type: inline-size;
+  font: var(--kds-font-base-body-small-strong);
+  color: inherit;
+  user-select: none;
+}
+.kds-avatar-initials > span[data-v-9e1a5abe] {
+  font-size: calc(1em + calc(100cqi - 2em) / 2);
+}
+
+.kds-avatar-counter {
+&[data-v-1aef516d] {
+  display: flex;
+  align-items: center;
+  isolation: isolate;
+}
+& .avatars[data-v-1aef516d] {
+    display: flex;
+}
+& .avatar {
+&[data-v-1aef516d] {
+    position: relative;
+}
+&[data-v-1aef516d]:not(:first-child) {
+      margin-left: calc(-1 * var(--kds-spacing-container-0-25x));
+}
+}
+& .more-count[data-v-1aef516d] {
+    margin-left: var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-subtext-small);
+}
+}
+.kds-icon {
+&[data-v-bff4f419] {
+  --icon-width: var(--kds-dimension-icon-1x);
+  --icon-height: var(--kds-dimension-icon-1x);
+  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
+
+  display: inline-block;
+  width: var(--icon-width);
+  /* min sizes, otherwise they might collapse if there is not enough space */
+  min-width: var(--icon-width);
+  height: var(--icon-height);
+  min-height: var(--icon-height);
+  vertical-align: middle;
+  stroke-width: var(--icon-stroke-width);
+  shape-rendering: geometricPrecision;
+}
+&.xsmall[data-v-bff4f419] {
+    --icon-width: var(--kds-dimension-icon-0-56x);
+    --icon-height: var(--kds-dimension-icon-0-56x);
+    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
+@media (max-resolution: 1.5dppx) {
+      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
+      rendering issues which manifests in misaligned or 'jumping' svg content.
+      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
+      CSS transform. Thus the position of the SVG elements stays intact. */
+&[data-v-bff4f419] {
+        --scaling-factor: 0.75;
+        --icon-width: var(--kds-dimension-icon-0-75x);
+        --icon-height: var(--kds-dimension-icon-0-75x);
+        --icon-stroke-width: calc(
+          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
+        );
+        transform: scale(var(--scaling-factor));
+}
+}
+}
+&.small[data-v-bff4f419] {
+    --icon-width: var(--kds-dimension-icon-0-75x);
+    --icon-height: var(--kds-dimension-icon-0-75x);
+    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
+}
+&.large[data-v-bff4f419] {
+    --icon-width: var(--kds-dimension-icon-1-25x);
+    --icon-height: var(--kds-dimension-icon-1-25x);
+    --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
+}
+}
+.kds-icon.disabled[data-v-bff4f419] {
+  color: var(--kds-color-text-and-icon-disabled);
+}
+.kds-icon {
+&[data-v-38e9537f] {
+  --icon-width: var(--kds-dimension-icon-1x);
+  --icon-height: var(--kds-dimension-icon-1x);
+  --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
+
+  display: inline-block;
+  width: var(--icon-width);
+  /* min sizes, otherwise they might collapse if there is not enough space */
+  min-width: var(--icon-width);
+  height: var(--icon-height);
+  min-height: var(--icon-height);
+  vertical-align: middle;
+  stroke-width: var(--icon-stroke-width);
+  shape-rendering: geometricPrecision;
+}
+&.xsmall[data-v-38e9537f] {
+    --icon-width: var(--kds-dimension-icon-0-56x);
+    --icon-height: var(--kds-dimension-icon-0-56x);
+    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
+@media (max-resolution: 1.5dppx) {
+      /* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
+      rendering issues which manifests in misaligned or 'jumping' svg content.
+      Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
+      CSS transform. Thus the position of the SVG elements stays intact. */
+&[data-v-38e9537f] {
+        --scaling-factor: 0.75;
+        --icon-width: var(--kds-dimension-icon-0-75x);
+        --icon-height: var(--kds-dimension-icon-0-75x);
+        --icon-stroke-width: calc(
+          var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
+        );
+        transform: scale(var(--scaling-factor));
+}
+}
+}
+&.small[data-v-38e9537f] {
+    --icon-width: var(--kds-dimension-icon-0-75x);
+    --icon-height: var(--kds-dimension-icon-0-75x);
+    --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
+}
+&.large[data-v-38e9537f] {
+    --icon-width: var(--kds-dimension-icon-1-25x);
+    --icon-height: var(--kds-dimension-icon-1-25x);
+    --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
+}
+}
+.kds-data-type-icon-container {
+&[data-v-38e9537f] {
+  --data-type-height: var(--kds-dimension-component-height-1x);
+  --data-type-width: var(--kds-dimension-component-width-1x);
+  --data-type-padding: var(--kds-spacing-container-0-12x);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--data-type-width);
+  height: var(--data-type-height);
+  padding: var(--data-type-padding);
+  color: var(--kds-color-desktop-header-text-and-icon-muted);
+  background-color: var(--kds-color-page-default);
+  border: var(--kds-border-base-muted);
+  border-radius: var(--kds-border-radius-container-0-12x);
+
+  /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
+}
+&.disabled[data-v-38e9537f] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+&.small[data-v-38e9537f] {
+    --data-type-height: var(--kds-dimension-icon-0-75x);
+    --data-type-width: var(--kds-dimension-icon-0-75x);
+    --data-type-padding: var(--kds-spacing-container-none);
+}
+&.large[data-v-38e9537f] {
+    --data-type-height: var(--kds-dimension-component-height-1-25x);
+    --data-type-width: var(--kds-dimension-component-width-1-25x);
+}
+& .kds-icon.kds-data-type-icon {
+&.small[data-v-38e9537f] {
+      --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
+}
+&.medium[data-v-38e9537f] {
+      --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
+}
+}
+}
+
+.kds-badge {
+&[data-v-df64f7cf] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+& .label-wrapper[data-v-df64f7cf] {
+    min-width: 0;
+    max-width: var(--kds-dimension-component-width-16x);
+    padding: 0 var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+&.xxsmall[data-v-df64f7cf] {
+    height: var(--kds-dimension-component-height-1x);
+    padding: 0 var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-title-xsmall);
+}
+&.xsmall[data-v-df64f7cf] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: 0 var(--kds-spacing-container-0-37x);
+    font: var(--kds-font-base-title-small);
+}
+&.neutral[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-bold-initial);
+    border: var(--kds-border-base-subtle);
+}
+&.info[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-info);
+    background-color: var(--kds-color-background-static-info);
+    border: var(--kds-border-base-info);
+}
+&.warning[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-warning);
+    background-color: var(--kds-color-background-static-warning);
+    border: var(--kds-border-base-warning);
+}
+&.success[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-success);
+    background-color: var(--kds-color-background-static-success);
+    border: var(--kds-border-base-success);
+}
+&.error[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-danger);
+    background-color: var(--kds-color-background-static-danger);
+    border: var(--kds-border-base-danger);
+}
+&.ghost[data-v-df64f7cf] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: transparent;
+    border: var(--kds-border-base-subtle);
+}
+}
+
+.kds-color-swatch {
+&[data-v-91e0130d] {
+  display: inline-block;
+  flex-shrink: 0;
+  overflow: hidden;
+  line-height: 0;
+  background-origin: border-box;
+  border: var(--kds-border-base-muted);
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.small[data-v-91e0130d] {
+    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-0-75x) / 4);
+
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.medium[data-v-91e0130d] {
+    --kds-color-swatch-checker-size: calc(var(--kds-dimension-icon-1x) / 4);
+
+    width: var(--kds-dimension-icon-1x);
+    height: var(--kds-dimension-icon-1x);
+}
+&.large[data-v-91e0130d] {
+    --kds-color-swatch-checker-size: calc(
+      var(--kds-dimension-component-width-1-25x) / 4
+    );
+
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+}
+
+.kds-live-status {
+&[data-v-01555495] {
+  --dot-color: var(--kds-color-state-disabled);
+  --dot-border-color: var(--kds-color-state-disabled-border);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0; /* gap already included in dot */
+  align-items: center;
+  max-width: 100%;
+  line-height: 0;
+}
+&.red[data-v-01555495] {
+    --dot-color: var(--kds-color-state-error);
+    --dot-border-color: var(--kds-color-state-error-border);
+}
+&.orange[data-v-01555495] {
+    --dot-color: var(--kds-color-state-warning);
+    --dot-border-color: var(--kds-color-state-warning-border);
+}
+&.green[data-v-01555495] {
+    --dot-color: var(--kds-color-state-success);
+    --dot-border-color: var(--kds-color-state-success-border);
+}
+.dot {
+&[data-v-01555495] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
+}
+&[data-v-01555495]::after {
+      display: block;
+      width: 50%;
+      height: 50%;
+      content: "";
+      background-color: var(--dot-color);
+      border-color: var(--dot-border-color);
+      border-style: solid;
+      border-width: var(--kds-border-width-icon-stroke-l);
+      border-radius: var(--kds-border-radius-container-pill);
+}
+}
+.label[data-v-01555495] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-subtext-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+    white-space: nowrap;
+}
+&.size-medium {
+.dot[data-v-01555495] {
+      width: var(--kds-dimension-icon-1x);
+      height: var(--kds-dimension-icon-1x);
+}
+&[data-v-01555495]::after {
+      border-width: var(--kds-border-width-icon-stroke-m);
+}
+.label[data-v-01555495] {
+      font: var(--kds-font-base-subtext-small);
+}
+}
+&.size-small {
+.dot[data-v-01555495] {
+      width: var(--kds-dimension-icon-0-75x);
+      height: var(--kds-dimension-icon-0-75x);
+}
+&[data-v-01555495]::after {
+      border-width: var(--kds-border-width-icon-stroke-s);
+}
+.label[data-v-01555495] {
+      font: var(--kds-font-base-subtext-xsmall);
+}
+}
+}
+
+.kds-loading-spinner {
+&[data-v-54835dc0] {
+  --icon-width: var(--kds-dimension-icon-1x);
+  --icon-height: var(--kds-dimension-icon-1x);
+  --icon-stroke-width: 12; /* 10% of size */
+
+  width: var(--icon-width);
+  height: var(--icon-height);
+
+  --color-track: var(--kds-color-loading-spinner-track-on-surface);
+  --color-loader: var(--kds-color-loading-spinner-progress-on-surface);
+}
+&.xsmall[data-v-54835dc0] {
+    --icon-width: var(--kds-dimension-icon-0-56x);
+    --icon-height: var(--kds-dimension-icon-0-56x);
+}
+&.small[data-v-54835dc0] {
+    --icon-width: var(--kds-dimension-icon-0-75x);
+    --icon-height: var(--kds-dimension-icon-0-75x);
+}
+&.large[data-v-54835dc0] {
+    --icon-width: var(--kds-dimension-icon-1-25x);
+    --icon-height: var(--kds-dimension-icon-1-25x);
+}
+&[data-style="onPrimary"][data-v-54835dc0] {
+    --color-track: var(--kds-color-loading-spinner-track-on-primary);
+    --color-loader: var(--kds-color-loading-spinner-progress-on-primary);
+}
+& .track[data-v-54835dc0] {
+    fill: none;
+    stroke: var(--color-track);
+    stroke-width: var(--icon-stroke-width);
+}
+& .loader[data-v-54835dc0] {
+    fill: none;
+    stroke: var(--color-loader);
+    stroke-width: var(--icon-stroke-width);
+    stroke-linecap: round;
+    stroke-dasharray: 80 240;
+    transform: rotate(-90deg);
+    transform-origin: center;
+
+    /* REQUIRED for SVG rotation */
+    transform-box: fill-box;
+    animation: spin-54835dc0 1.2s linear infinite;
+}
+}
+@keyframes spin-54835dc0 {
+from {
+    transform: rotate(-90deg);
+}
+to {
+    transform: rotate(270deg);
+}
+}
+
+.kds-inline-message {
+&[data-v-af14056f] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: flex-start;
+  padding: calc(
+    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+  );
+  color: var(--kds-color-text-and-icon-neutral);
+  border-radius: var(--kds-border-radius-container-0-50x);
+}
+.header {
+&[data-v-af14056f] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: flex-start;
+}
+.icon[data-v-af14056f] {
+      align-self: flex-start;
+      margin-top: var(--kds-spacing-container-0-12x);
+      color: var(--icon-color);
+}
+.headline[data-v-af14056f] {
+      font: var(--kds-font-base-title-small-strong);
+}
+}
+.body[data-v-af14056f] {
+    align-self: stretch;
+    padding-left: var(--kds-spacing-container-1x);
+    font: var(--kds-font-base-body-small);
+    color: var(--kds-color-text-and-icon-muted);
+}
+&.info[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-info);
+
+    background-color: var(--kds-color-background-static-info-muted);
+    border: var(--kds-border-base-info);
+}
+&.success[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-success);
+
+    background-color: var(--kds-color-background-static-success-muted);
+    border: var(--kds-border-base-success);
+}
+&.error[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-danger);
+
+    background-color: var(--kds-color-background-static-danger-muted);
+    border: var(--kds-border-base-danger);
+}
+&.warning[data-v-af14056f] {
+    --icon-color: var(--kds-color-text-and-icon-warning);
+
+    background-color: var(--kds-color-background-static-warning-muted);
+    border: var(--kds-border-base-warning);
+}
+}
+
+.kds-missing-value-icon[data-v-df682150] {
+  color: var(--kds-color-text-and-icon-danger);
+  stroke-width: var(--kds-border-width-icon-stroke-s);
+}
+
+.donut-container {
+&[data-v-f5faf61c] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-75x);
+  align-items: center;
+}
+& .donut-chart {
+&[data-v-f5faf61c] {
+    display: block;
+    flex-shrink: 0;
+}
+& .background-circle[data-v-f5faf61c] {
+      stroke: var(--kds-color-background-static-chart-0);
+}
+& .primary-circle[data-v-f5faf61c] {
+      stroke: var(--kds-color-background-static-chart-1);
+}
+& .secondary-circle[data-v-f5faf61c] {
+      stroke: var(--kds-color-background-static-chart-2);
+}
+& .value-wedge {
+&.animate[data-v-f5faf61c] {
+        transition:
+          stroke-dashoffset 0.5s,
+          stroke 0.5s;
+}
+}
+}
+& .donut-text {
+&[data-v-f5faf61c] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    color: var(--kds-color-text-and-icon-neutral);
+}
+& .title[data-v-f5faf61c] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-title-medium-strong);
+      white-space: nowrap;
+}
+& .sub-text[data-v-f5faf61c] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-medium);
+      -webkit-box-orient: vertical;
+}
+}
+}
+
+.kds-divider[data-v-4d059bd3] {
+  margin: 0 0 var(--kds-spacing-container-0-12x);
+  border: none;
+  border-bottom: var(--kds-border-base-subtle);
+}
+
+html.kds-legacy {
+  --kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
+}
+
+.button {
+&[data-v-190ac311] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-width: 15px;
+  max-width: 100%;
+  overflow: hidden;
+  cursor: pointer;
+
+  /* for LinkButton */
+}
+&[data-v-190ac311]:is(a) {
+    text-decoration: none;
+}
+&.disabled[data-v-190ac311] {
+    cursor: default;
+}
+&[data-v-190ac311]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&.filled {
+&[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-primary-inverted);
+    background-color: var(--kds-color-background-primary-bold-initial);
+    border: var(--kds-border-action-transparent);
+}
+&.disabled[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled-inverted);
+      background-color: var(--kds-color-background-disabled-primary);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-primary-bold-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-primary-bold-active);
+}
+}
+&.destructive {
+&[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-danger-inverted);
+      background-color: var(--kds-color-background-danger-bold-initial);
+}
+&.disabled[data-v-190ac311] {
+        color: var(--kds-color-text-and-icon-disabled-inverted);
+        background-color: var(--kds-color-background-disabled-danger);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+          background-color: var(--kds-color-background-danger-bold-hover);
+}
+&[data-v-190ac311]:active {
+          background-color: var(--kds-color-background-danger-bold-active);
+}
+}
+}
+}
+&.outlined {
+&[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-initial);
+    border: var(--kds-border-action-default);
+}
+&.disabled[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled);
+      border: var(--kds-border-action-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-neutral-active);
+}
+}
+&.destructive {
+&[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-danger);
+      border: var(--kds-border-action-error);
+}
+&.disabled[data-v-190ac311] {
+        color: var(--kds-color-text-and-icon-disabled);
+        border: var(--kds-border-action-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+          background-color: var(--kds-color-background-danger-hover);
+}
+&[data-v-190ac311]:active {
+          background-color: var(--kds-color-background-danger-active);
+}
+}
+}
+}
+&.transparent {
+&[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-neutral);
+    background-color: var(--kds-color-background-neutral-initial);
+    border: var(--kds-border-action-transparent);
+}
+&.disabled[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-neutral-active);
+}
+}
+&.destructive {
+&[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&.disabled[data-v-190ac311] {
+        color: var(--kds-color-text-and-icon-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+          background-color: var(--kds-color-background-danger-hover);
+}
+&[data-v-190ac311]:active {
+          background-color: var(--kds-color-background-danger-active);
+}
+}
+}
+}
+&.toggled {
+&[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-selected);
+    background-color: var(--kds-color-background-selected-initial);
+    border: var(--kds-border-action-selected);
+}
+&.disabled[data-v-190ac311] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+&:not(.disabled, .success, .error) {
+&[data-v-190ac311]:hover {
+        background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-190ac311]:active {
+        background-color: var(--kds-color-background-selected-active);
+}
+}
+}
+& .label[data-v-190ac311] {
+    max-width: 200px;
+    padding: 0 var(--kds-spacing-container-0-12x);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-rendering: geometricprecision;
+}
+&.xsmall[data-v-190ac311] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-25x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
+
+    font: var(--kds-font-base-interactive-xsmall-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-25x)
+    );
+}
+&.small[data-v-190ac311] {
+    gap: var(--kds-spacing-container-0-12x);
+    height: var(--kds-dimension-component-height-1-5x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
+
+    font: var(--kds-font-base-interactive-small-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-37x)
+    );
+}
+&.medium[data-v-190ac311] {
+    gap: var(--kds-spacing-container-0-25x);
+    height: var(--kds-dimension-component-height-1-75x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
+
+    font: var(--kds-font-base-interactive-medium-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-37x)
+    );
+}
+&.large {
+&[data-v-190ac311] {
+    gap: var(--kds-spacing-container-0-25x);
+    height: var(--kds-dimension-component-height-2-25x);
+    padding: 0
+      calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
+
+    font: var(--kds-font-base-interactive-large-strong);
+    border-radius: var(
+      --kds-legacy-button-border-radius,
+      var(--kds-border-radius-container-0-50x)
+    );
+}
+& .label[data-v-190ac311] {
+      padding: 0 var(--kds-spacing-container-0-25x);
+}
+}
+&.success[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-success-inverted);
+    background-color: var(--kds-color-background-success-bold-initial);
+    border: var(--kds-border-action-transparent);
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out,
+      color 200ms ease-out;
+}
+&.error[data-v-190ac311] {
+    color: var(--kds-color-text-and-icon-danger-inverted);
+    background-color: var(--kds-color-background-danger-bold-initial);
+    border: var(--kds-border-action-transparent);
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out,
+      color 200ms ease-out;
+}
+&.remove-border-radius-left[data-v-190ac311] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+&.remove-border-radius-right[data-v-190ac311] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+}
+
+.kds-link {
+&[data-v-56e748a8] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--kds-spacing-container-none) var(--kds-spacing-container-0-10x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+  text-decoration-line: underline;
+  border-radius: var(--kds-border-radius-container-0-12x);
+}
+&[data-v-56e748a8]:is(a) {
+    cursor: pointer;
+}
+&[data-v-56e748a8]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-container-none);
+}
+& .label[data-v-56e748a8],
+  & .file-size[data-v-56e748a8] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+&.variant-internal {
+&[data-v-56e748a8] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&:not(.disabled) {
+&[data-v-56e748a8]:visited {
+        color: var(--kds-color-text-and-icon-info);
+}
+&[data-v-56e748a8]:hover {
+        background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-56e748a8]:active {
+        background-color: var(--kds-color-background-neutral-active);
+}
+}
+}
+&.variant-external[data-v-56e748a8] {
+    gap: var(--kds-spacing-container-0-12x);
+}
+&:is(.variant-external, .variant-document) {
+&[data-v-56e748a8] {
+    color: var(--kds-color-text-and-icon-selected);
+}
+&:not(.disabled) {
+&[data-v-56e748a8]:visited {
+        color: var(--kds-color-text-and-icon-info);
+}
+&[data-v-56e748a8]:hover {
+        color: var(--kds-color-text-and-icon-primary-inverted);
+        background-color: var(--kds-color-background-primary-bold-hover);
+}
+&[data-v-56e748a8]:active {
+        color: var(--kds-color-text-and-icon-selected-inverted);
+        background-color: var(--kds-color-background-primary-bold-active);
+}
+}
+}
+&.disabled[data-v-56e748a8] {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+    cursor: default;
+}
+}
+
+.leading {
+&[data-v-d38d7ade] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-icon-1x);
+  height: var(--kds-dimension-icon-1x);
+}
+&.xsmall[data-v-d38d7ade] {
+    width: var(--kds-dimension-icon-0-56x);
+    height: var(--kds-dimension-icon-0-56x);
+}
+&.small[data-v-d38d7ade] {
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+}
+&.large[data-v-d38d7ade] {
+    width: var(--kds-dimension-icon-1-25x);
+    height: var(--kds-dimension-icon-1-25x);
+}
+}
+.leading-icon[data-v-d38d7ade],
+.spinner[data-v-d38d7ade] {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+.leading-icon[data-visible="true"][data-v-d38d7ade],
+.spinner[data-visible="true"][data-v-d38d7ade] {
+  opacity: 1;
+}
+
+.kds-list-item {
+&[data-v-a3d6c86f] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  min-height: var(--kds-dimension-component-height-1-5x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.small {
+&[data-v-a3d6c86f] {
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: flex-start;
+    padding: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-5x);
+    font: var(--kds-font-base-interactive-small);
+}
+.accessory[data-v-a3d6c86f] {
+      display: flex;
+      padding: var(--kds-spacing-container-0-12x) 0;
+}
+}
+&.large {
+&[data-v-a3d6c86f] {
+    font: var(--kds-font-base-interactive-small-strong);
+}
+.accessory[data-v-a3d6c86f] {
+      display: flex;
+      align-items: center;
+}
+}
+.content {
+&[data-v-a3d6c86f] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    min-width: 0;
+}
+.large &[data-v-a3d6c86f] {
+      justify-content: center;
+      min-height: calc(
+        var(--kds-dimension-component-height-2-5x) - 2 *
+          var(--kds-spacing-container-0-25x)
+      );
+}
+.label {
+&[data-v-a3d6c86f] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+}
+.prefix[data-v-a3d6c86f] {
+        flex-shrink: 0;
+}
+.special[data-v-a3d6c86f] {
+        font: var(--kds-font-base-interactive-small-italic);
+}
+}
+.subtext[data-v-a3d6c86f] {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      font: var(--kds-font-base-subtext-small);
+      color: var(--kds-color-text-and-icon-muted);
+      -webkit-box-orient: vertical;
+}
+}
+.trailing-item {
+&[data-v-a3d6c86f] {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: center;
+    align-self: center;
+    justify-content: flex-end;
+}
+.shortcut[data-v-a3d6c86f] {
+      flex-shrink: 0;
+      font: var(--kds-font-base-interactive-xsmall-strong);
+      color: var(--kds-color-text-and-icon-muted);
+      text-align: right;
+      white-space: nowrap;
+}
+.trailing-item-reserve-space[data-v-a3d6c86f] {
+      width: var(--kds-dimension-icon-0-75x);
+}
+}
+&[data-v-a3d6c86f]:hover:not(.disabled),
+  &.active[data-v-a3d6c86f]:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-a3d6c86f]:active:not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-a3d6c86f] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+.subtext[data-v-a3d6c86f] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+&[data-v-a3d6c86f]:hover,
+    &.active[data-v-a3d6c86f] {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-a3d6c86f]:active {
+      background: var(--kds-color-background-selected-active);
+}
+&.disabled[data-v-a3d6c86f] {
+      background: var(--kds-color-background-selected-initial);
+}
+}
+&.missing {
+&[data-v-a3d6c86f] {
+    color: var(--kds-color-text-and-icon-danger);
+    background: var(--kds-color-background-danger-initial);
+}
+.subtext[data-v-a3d6c86f] {
+      color: var(--kds-color-text-and-icon-danger);
+}
+&[data-v-a3d6c86f]:hover,
+    &.active[data-v-a3d6c86f] {
+      background: var(--kds-color-background-danger-hover);
+}
+&[data-v-a3d6c86f]:active {
+      background: var(--kds-color-background-danger-active);
+}
+&.disabled[data-v-a3d6c86f] {
+      background: var(--kds-color-background-danger-initial);
+}
+}
+&.disabled {
+&[data-v-a3d6c86f] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.shortcut[data-v-a3d6c86f],
+    .subtext[data-v-a3d6c86f] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+
+.kds-list-item-section-title {
+&[data-v-5eeb1226] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-height: var(--kds-dimension-component-height-1-5x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.icon[data-v-5eeb1226] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+}
+.label[data-v-5eeb1226] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-xsmall);
+    white-space: nowrap;
+}
+}
+
+.kds-menu-item-link[data-v-677d6ca6] {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+
+  /*
+   * Keyboard navigation never focuses the anchor itself: the `KdsMenuContainer`
+   * keeps focus on the wrapping `[role="menu"]` and signals the active item via
+   * `aria-activedescendant`. The visual highlight is then rendered by the inner
+   * `KdsListItem`'s `active` prop. Because of that, suppressing the native
+   * `:focus` ring on mouse interaction is intentional — there is no companion
+   * indicator we'd be hiding.
+   */
+  outline: none;
+}
+
+.kds-menu-container {
+&[data-v-cce3fc40] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-10x);
+  min-width: var(--kds-dimension-component-width-12x);
+  max-width: var(--kds-dimension-component-width-20x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow-y: auto;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-cce3fc40]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-popover {
+&[data-v-1e5f9d24] {
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+
+  /* noinspection CssInvalidFunction */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /* noinspection CssInvalidFunction,CssInvalidAtRule */
+
+  /*
+   * For custom placement the popover is positioned statically via inline
+   * left/top styles. Explicitly clear the UA default `inset: 0` so the
+   * popover doesn't stretch to the viewport edges (which would break
+   * light-dismiss / click-outside behavior).
+   */
+}
+&.full-width[data-v-1e5f9d24] {
+    min-inline-size: anchor-size(width);
+}
+&.floating.top-right[data-v-1e5f9d24] {
+    inset: auto anchor(right) anchor(top) auto;
+    margin: var(--kds-spacing-container-0-25x) 0
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-top-left, --kds-popover-try-bottom-right,
+      --kds-popover-try-bottom-left, --kds-popover-try-top-right;
+}
+&.floating.top-left[data-v-1e5f9d24] {
+    inset: auto auto anchor(top) anchor(left);
+    margin: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
+    position-try-fallbacks:
+      --kds-popover-try-top-right, --kds-popover-try-bottom-left,
+      --kds-popover-try-bottom-right, --kds-popover-try-top-left;
+}
+&.floating.bottom-right[data-v-1e5f9d24] {
+    inset: anchor(bottom) anchor(right) auto auto;
+    margin: var(--kds-spacing-container-0-25x) 0
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+    position-try-fallbacks:
+      --kds-popover-try-bottom-left, --kds-popover-try-top-right,
+      --kds-popover-try-top-left, --kds-popover-try-bottom-right;
+}
+&.floating.bottom-left[data-v-1e5f9d24] {
+    inset: anchor(bottom) auto auto anchor(left);
+    margin: var(--kds-spacing-container-0-25x)
+      var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
+    position-try-fallbacks:
+      --kds-popover-try-bottom-right, --kds-popover-try-top-left,
+      --kds-popover-try-top-right, --kds-popover-try-bottom-left;
+}
+&.floating.custom[data-v-1e5f9d24] {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+}
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-right {
+  inset: auto anchor(right) anchor(top) auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-top-left {
+  inset: auto auto anchor(top) anchor(left);
+  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
+    var(--kds-spacing-container-0-25x) 0;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-right {
+  inset: anchor(bottom) anchor(right) auto auto;
+  margin: var(--kds-spacing-container-0-25x) 0
+    var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-bottom-left {
+  inset: anchor(bottom) auto auto anchor(left);
+  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
+    var(--kds-spacing-container-0-25x) 0;
+}
+.kds-popover-default-content[data-v-1e5f9d24] {
+  padding: var(--kds-spacing-container-0-75x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.kds-split-button {
+&[data-v-8f48b87a] {
+  display: flex;
+}
+&.filled[data-v-8f48b87a] {
+    gap: var(--kds-spacing-container-0-10x);
+}
+&.outlined[data-v-8f48b87a] {
+    gap: var(--kds-spacing-container-none);
+}
+& .kds-split-button-primary.outlined[data-v-8f48b87a] {
+    border-right: none;
+}
+}
+.kds-split-button-primary[data-v-8f48b87a] {
+  flex-shrink: 1;
+  min-width: 0;
+}
+.kds-split-button-secondary[data-v-8f48b87a] {
+  flex-shrink: 0;
+}
+
+.kds-empty-state[data-v-e913660a] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  max-width: 280px;
+  padding: var(--kds-spacing-container-0-5x);
+}
+.kds-empty-state-headline[data-v-e913660a] {
+  margin: 0;
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-description[data-v-e913660a] {
+  margin: 0;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-muted);
+  text-align: center;
+}
+.kds-empty-state-action[data-v-e913660a] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  margin-top: var(--kds-spacing-container-0-12x);
+}
+.kds-empty-state.disabled {
+& .kds-empty-state-headline[data-v-e913660a],
+  & .kds-empty-state-description[data-v-e913660a] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+}
+
+.kds-list-container {
+&[data-v-118706ad] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-10x);
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow-y: auto;
+}
+&.standalone[data-v-118706ad] {
+    border: var(--kds-border-base-subtle);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[data-v-118706ad]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+}
+.kds-list-container-empty[data-v-118706ad] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.kds-list-item-divider[data-v-118706ad] {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0;
+}
+
+.kds-label-wrapper[data-v-efe3313e] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: flex-start;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
+}
+.label[data-v-efe3313e] {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  height: calc(
+    var(--kds-dimension-component-height-1x) +
+      var(--kds-spacing-input-label-spacing-bottom)
+  );
+  padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+
+.subtext {
+&[data-v-2e6ba10c] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  min-height: 1lh;
+  margin-top: var(--kds-spacing-container-0-25x);
+  font: var(--kds-font-base-subtext-small);
+  color: var(--kds-color-text-and-icon-muted);
+}
+&.error[data-v-2e6ba10c] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+& .subtext-text[data-v-2e6ba10c] {
+    min-width: 0;
+}
+}
+
+.kds-form-field[data-v-5d99c134] {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+&[data-v-93daa14e] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: 0
+    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
+  cursor: text;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+&[data-v-93daa14e]:has(input:focus:not(:disabled)) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-93daa14e]:has(.input-field:hover:not(:disabled, :focus)) {
+    background: var(--kds-color-background-input-hover);
+}
+&.error[data-v-93daa14e] {
+    border: var(--kds-border-action-error);
+}
+&.disabled[data-v-93daa14e] {
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+}
+.icon-wrapper {
+&[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--kds-color-text-and-icon-subtle);
+}
+&.leading[data-v-93daa14e] {
+    padding-left: var(--kds-spacing-container-0-12x);
+}
+&.trailing[data-v-93daa14e] {
+    padding-right: var(--kds-spacing-container-0-12x);
+}
+.container.disabled &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+.container:focus-within &[data-v-93daa14e],
+  .container:has(.input-field.has-value) &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.input-field {
+&[data-v-93daa14e] {
+  flex: 1 0 0;
+  min-width: 0;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+  outline: none;
+  background: transparent;
+  border: none;
+
+  /* hide native steppers, we provide our own in NumberInput */
+
+  /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
+}
+&[type="number"] {
+&[data-v-93daa14e] {
+    appearance: textfield;
+}
+&[data-v-93daa14e]::-webkit-outer-spin-button,
+    &[data-v-93daa14e]::-webkit-inner-spin-button {
+      margin: 0;
+      appearance: none;
+}
+}
+&[type="search"][data-v-93daa14e]::-webkit-search-cancel-button {
+    appearance: none;
+}
+&[data-v-93daa14e]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.empty-mask[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+&[data-v-93daa14e]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+.unit {
+&[data-v-93daa14e] {
+  flex-shrink: 0;
+  min-width: 0;
+  margin: 0 var(--kds-spacing-container-0-12x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+&.placeholder[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.disabled[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-disabled);
+}
+.container:focus-within &[data-v-93daa14e] {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.clear-button[data-v-93daa14e] {
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.leading-slot[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+}
+.trailing-slot[data-v-93daa14e] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+
+.kds-text-input-suggestions[data-v-83f45d15] {
+  max-height: var(--kds-dimension-component-height-12x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.file-explorer-item-base {
+&[data-v-aad38d13] {
+  /* required for positioning of renaming (.item-error) */
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  padding: var(--kds-spacing-container-0-12x) var(--kds-spacing-container-0-5x)
+    var(--kds-spacing-container-0-10x);
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border-bottom: var(--kds-border-base-subtle);
+}
+&:focus {
+&[data-v-aad38d13] {
+    outline: none;
+}
+&.keyboard-focus[data-v-aad38d13] {
+      padding: 0 var(--kds-spacing-container-0-37x);
+      border: var(--kds-border-action-focused);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+}
+&[data-v-aad38d13]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&.selected,
+  &.dragging {
+&[data-v-aad38d13] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+}
+&[data-v-aad38d13]::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: var(--kds-dimension-component-width-0-125x);
+      height: calc(2 / 3 * 100%);
+      pointer-events: none;
+      content: "";
+      background: var(--kds-color-background-selected-bold-initial);
+      border-radius: 0 var(--kds-border-radius-container-0-12x)
+        var(--kds-border-radius-container-0-12x) 0;
+      transform: translateY(-50%);
+}
+}
+&.selected[data-v-aad38d13]:hover {
+    background: var(--kds-color-background-selected-hover);
+}
+&.dragging-over[data-v-aad38d13] {
+    padding: var(--kds-spacing-container-0-10x)
+      calc(
+        var(--kds-spacing-container-0-37x) + var(--kds-spacing-container-0-10x)
+      );
+    background: var(--kds-color-focus-background);
+    border: var(--kds-border-action-selected-accent);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.anything-is-dragged {
+& td[data-v-aad38d13],
+    & td[data-v-aad38d13-s] {
+      /* Prevent children from interfering with drag events */
+      pointer-events: none;
+}
+}
+&.disabled[data-v-aad38d13] {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+}
+}
+
+.file-explorer-item {
+&[data-v-91cbcaae] {
+  display: grid;
+
+  /* first two cols - icon + name */
+  grid-template-columns: min-content var(--file-explorer-item-grid, 1fr);
+  grid-auto-columns: auto; /* middle ones are auto */
+  grid-auto-flow: column;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+
+  /* style the last column if the options menu is visible */
+}
+&.has-options-menu > td[data-v-91cbcaae]:last-child {
+    width: min-content;
+}
+& .column {
+&[data-v-91cbcaae] {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+}
+& .inner[data-v-91cbcaae] {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+}
+&.dynamic-column[data-v-91cbcaae]:empty {
+      display: none;
+}
+}
+& .item-error[data-v-91cbcaae] {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-25x);
+    margin-top: var(--kds-spacing-container-0-25x);
+    font: var(--kds-font-base-subtext-small);
+    white-space: normal;
+    backdrop-filter: blur(10px);
+    transform: translateY(100%);
+}
+& td.rename-active {
+&[data-v-91cbcaae] {
+    padding: 0 var(--kds-spacing-container-0-25x);
+}
+& .rename-input-container[data-v-91cbcaae] {
+      flex: 1;
+}
+}
+& .item-icon {
+&[data-v-91cbcaae] {
+    position: relative;
+}
+& .open-indicator[data-v-91cbcaae] {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: var(--kds-spacing-container-0-37x);
+      height: var(--kds-spacing-container-0-37x);
+      background: var(--kds-color-text-and-icon-selected);
+      border-radius: 50%;
+}
+}
+}
+
+.hidden[data-v-a5de970a] {
+  display: none;
+}
+.file-explorer-item-back[data-v-a5de970a] {
+  cursor: pointer;
+}
+
+.file-explorer[data-v-921486c1] {
+  display: flex;
+  flex: 1 0 0%;
+  flex-direction: column;
+  height: 100%;
+
+  /* needed so that the virtualization container can size the wrapper properly */
+  min-height: 0;
+}
+.file-explorer-item[data-v-921486c1] {
+  height: var(--v6215695b);
+}
+thead[data-v-921486c1] {
+  /* Hide table head for better readability but keeping it for a11y reasons */
+  position: absolute;
+
+  /* move far far enough outside view, just in case */
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap; /* added line */
+}
+table[data-v-921486c1] {
+  height: 100%;
+  overflow: hidden auto;
+  scrollbar-gutter: stable;
+  table-layout: fixed;
+  border: var(--kds-border-base-subtle);
+  border-radius: var(--kds-border-radius-container-0-31x);
+  isolation: isolate;
+}
+table,
+tbody {
+&[data-v-921486c1] {
+  width: 100%;
+  border-spacing: 0;
+  }
+&[data-v-921486c1]:not(:has(.empty)) {
+    display: block;
+}
+}
+table:focus {
+&[data-v-921486c1] {
+  outline: none;
+  }
+&.keyboard-focus[data-v-921486c1] {
+    outline: 2px solid var(--kds-color-focus-outline);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+}
+.empty[data-v-921486c1] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--kds-spacing-container-0-37x);
+  margin: var(--kds-spacing-container-4x) 0;
+}
+.custom-preview[data-v-921486c1] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 70px;
+  height: 70px;
+  pointer-events: none;
+}
+
+.kds-preview-list {
+&[data-v-a11103f6] {
+  display: flex;
+  flex-direction: column;
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-fake-border-xs-muted);
+}
+.kds-preview-list-title-row[data-v-a11103f6] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    min-height: calc(
+      var(--kds-dimension-component-height-1-25x) + 2 *
+        var(--kds-spacing-container-0-25x)
+    );
+    padding: var(--kds-spacing-container-0-25x);
+    padding-left: var(--kds-spacing-container-0-5x);
+    border-top-left-radius: var(--kds-border-radius-container-0-37x);
+    border-top-right-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-preview-list-content[data-v-a11103f6] {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+}
+.kds-preview-list-headline[data-v-a11103f6] {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-interactive-small-strong);
+    color: var(--kds-color-text-and-icon-neutral);
+    white-space: nowrap;
+}
+.kds-preview-list-body[data-v-a11103f6] {
+    display: flex;
+    flex-direction: column;
+    height: calc(
+      var(--kds-dimension-component-height-1-5x) * var(--a76a77a8) +
+        (var(--a76a77a8) - 1) * var(--kds-spacing-container-0-10x) +
+        var(--kds-spacing-container-0-25x) * 2
+    );
+    background: var(--kds-color-surface-default);
+}
+.kds-preview-list-items {
+&[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-10x);
+    padding: var(--kds-spacing-container-0-25x);
+    margin: 0;
+    overflow-y: auto;
+    list-style: none;
+}
+&[data-v-a11103f6]:focus-visible {
+      outline: var(--kds-border-action-focused);
+      outline-offset: var(--kds-spacing-offset-focus);
+      border-radius: var(--kds-border-radius-container-0-31x);
+}
+}
+.kds-preview-list-item {
+&[data-v-a11103f6] {
+    /* Items are non-interactive (preview only): no pointer cursor, no hover
+       highlight, but text remains selectable. */
+    cursor: text;
+    user-select: text;
+}
+&[data-v-a11103f6]:hover:not(.disabled),
+    &[data-v-a11103f6]:active:not(.disabled) {
+      background: transparent;
+}
+}
+.kds-preview-list-empty[data-v-a11103f6],
+  .kds-preview-list-loading[data-v-a11103f6] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.kds-preview-list-show-hide {
+&[data-v-a11103f6] {
+    padding: var(--kds-spacing-container-0-25x);
+    border-top: var(--kds-border-base-subtle);
+    border-bottom-right-radius: var(--kds-border-radius-container-0-37x);
+    border-bottom-left-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-preview-list-toggle[data-v-a11103f6] {
+      width: 100%;
+}
+}
+}
+
+.checkbox {
+&[data-v-7bfc5667] {
+  --bg-initial: var(--kds-color-background-input-initial);
+  --bg-hover: var(--kds-color-background-input-hover);
+  --bg-active: var(--kds-color-background-input-active);
+  --border: var(--kds-border-action-input);
+  --icon-color: var(--kds-color-text-and-icon-selected);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+  --helper-text-color: var(--kds-color-text-and-icon-muted);
+
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+.control[data-v-7bfc5667] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-component-height-0-88x);
+    height: var(--kds-dimension-component-height-0-88x);
+    color: var(--icon-color);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&:focus-visible .control[data-v-7bfc5667] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-7bfc5667] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-7bfc5667] {
+    background: var(--bg-active);
+}
+&.checked[data-v-7bfc5667],
+  &.indeterminate[data-v-7bfc5667] {
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+    --border: var(--kds-border-action-selected);
+}
+.content {
+&[data-v-7bfc5667] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-12x);
+    text-rendering: geometricprecision;
+}
+& .label[data-v-7bfc5667] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-7bfc5667] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
+}
+}
+&.disabled[data-v-7bfc5667] {
+    --border: var(--kds-border-action-disabled);
+    --icon-color: var(--kds-color-text-and-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+    --helper-text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.error {
+&[data-v-7bfc5667] {
+    --border: var(--kds-border-action-error);
+    --icon-color: var(--kds-color-text-and-icon-danger);
+    --text-color: var(--kds-color-text-and-icon-danger);
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+}
+&.checked[data-v-7bfc5667],
+    &.indeterminate[data-v-7bfc5667] {
+      --bg-initial: var(--kds-color-background-danger-initial);
+}
+}
+}
+.subtext-wrapper[data-v-7bfc5667] {
+  padding-left: calc(
+    var(--kds-dimension-component-height-0-88x) +
+      var(--kds-spacing-container-0-37x)
+  );
+}
+
+.kds-fieldset[data-v-a44731da] {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.kds-fieldset-legend[data-v-a44731da] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-12x);
+  align-items: center;
+  max-width: 100%;
+  min-height: var(--kds-dimension-component-height-0-75x);
+  padding: 0 0 var(--kds-spacing-input-label-spacing-bottom);
+}
+.kds-fieldset-content[data-v-a44731da] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.legend-text[data-v-a44731da] {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: nowrap;
+}
+
+.options[data-v-c6536296] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+.options.horizontal[data-v-c6536296] {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+.radio {
+&[data-v-f4f6392a] {
+  --bg-initial: var(--kds-color-background-input-initial);
+  --bg-hover: var(--kds-color-background-input-hover);
+  --bg-active: var(--kds-color-background-input-active);
+  --border: var(--kds-border-action-input);
+  --dot-color: var(--kds-color-text-and-icon-selected);
+  --text-color: var(--kds-color-text-and-icon-neutral);
+  --helper-text-color: var(--kds-color-text-and-icon-muted);
+
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+}
+.control[data-v-f4f6392a] {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-dimension-component-height-0-88x);
+    height: var(--kds-dimension-component-height-0-88x);
+    background: var(--bg-initial);
+    border: var(--border);
+    border-radius: 50%;
+}
+.control .dot[data-v-f4f6392a] {
+    display: block;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+}
+.control .dot circle[data-v-f4f6392a] {
+    fill: var(--dot-color);
+    transform: scale(0.5);
+    transform-origin: center;
+    transform-box: fill-box;
+}
+&:focus-visible .control[data-v-f4f6392a] {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:hover:not(.disabled) .control[data-v-f4f6392a] {
+    background: var(--bg-hover);
+}
+&:active:not(.disabled) .control[data-v-f4f6392a] {
+    background: var(--bg-active);
+}
+&.selected[data-v-f4f6392a] {
+    --border: var(--kds-border-action-selected);
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+}
+.content {
+&[data-v-f4f6392a] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+}
+& .label[data-v-f4f6392a] {
+      font: var(--kds-font-base-interactive-small);
+      color: var(--text-color);
+}
+& .helper-text[data-v-f4f6392a] {
+      font: var(--kds-font-base-subtext-small);
+      color: var(--helper-text-color);
+}
+}
+&.disabled[data-v-f4f6392a] {
+    --bg-initial: var(--kds-color-background-input-initial);
+    --border: var(--kds-border-action-disabled);
+    --dot-color: var(--kds-color-text-and-icon-disabled);
+    --text-color: var(--kds-color-text-and-icon-disabled);
+    --helper-text-color: var(--kds-color-text-and-icon-disabled);
+
+    cursor: default;
+}
+&.error {
+&[data-v-f4f6392a] {
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+    --border: var(--kds-border-action-error);
+    --dot-color: var(--kds-color-text-and-icon-danger);
+    --text-color: var(--kds-color-text-and-icon-danger);
+}
+&.selected[data-v-f4f6392a] {
+      --bg-initial: var(--kds-color-background-danger-initial);
+      --border: var(--kds-border-action-error);
+}
+}
+}
+
+.options[data-v-d78ed4a2] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+.options.horizontal[data-v-d78ed4a2] {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+.option {
+&[data-v-5c6f0f1f] {
+  display: flex;
+  flex: 0 1 auto;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  justify-content: center;
+  min-width: calc(
+    var(--kds-dimension-icon-1x) + (2 * var(--kds-spacing-container-0-37x))
+  );
+  max-width: 100%;
+  height: var(--kds-dimension-component-height-1-5x);
+  padding: 0 var(--kds-spacing-container-0-37x);
+  font: var(--kds-font-base-interactive-medium-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: center;
+  cursor: pointer;
+
+  /* variant=default */
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.size-small[data-v-5c6f0f1f] {
+    height: var(--kds-dimension-component-height-1-25x);
+    font: var(--kds-font-base-interactive-small-strong);
+}
+&[data-v-5c6f0f1f]:focus-visible {
+    outline: none;
+}
+&[data-v-5c6f0f1f]:focus:not(.selected) {
+    border: var(--kds-border-action-selected);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-5c6f0f1f]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-5c6f0f1f] {
+    color: var(--kds-color-text-and-icon-selected);
+    background: var(--kds-color-background-selected-initial);
+    border: var(--kds-border-action-selected);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-5c6f0f1f]:active:not(:disabled) {
+      background: var(--kds-color-background-selected-active);
+}
+&.variant-muted {
+&[data-v-5c6f0f1f] {
+      color: var(--kds-color-text-and-icon-neutral);
+      background: var(--kds-color-background-input-initial);
+}
+&[data-v-5c6f0f1f]:hover:not(:disabled) {
+        background: var(--kds-color-background-input-hover);
+}
+&[data-v-5c6f0f1f]:active:not(:disabled) {
+        background: var(--kds-color-background-input-active);
+}
+}
+}
+&.disabled[data-v-5c6f0f1f] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+}
+&.disabled.selected[data-v-5c6f0f1f] {
+    color: var(--kds-color-text-and-icon-disabled);
+    border: var(--kds-border-action-disabled);
+}
+}
+.option-label[data-v-5c6f0f1f] {
+  min-width: 0;
+  padding: 0 var(--kds-spacing-container-0-12x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: inherit;
+  white-space: nowrap;
+}
+
+.value-switch[data-v-f6d51795] {
+  align-items: flex-start;
+}
+.options {
+&[data-v-f6d51795] {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--kds-spacing-container-none);
+  align-items: flex-start;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  padding: calc(
+    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
+  );
+  overflow: hidden;
+  background: var(--kds-color-surface-muted);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-fake-border-xs-muted);
+  }
+&[data-v-f6d51795]:has(:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-44x);
+}
+&.error[data-v-f6d51795] {
+    border: var(--kds-border-action-error);
+    box-shadow: none;
+}
+}
+
+.kds-color-picker-slider {
+&[data-v-f4be2bd4] {
+  position: relative;
+  width: 100%;
+  height: var(--kds-dimension-component-height-0-75x);
+  touch-action: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border-radius: var(--kds-border-radius-container-pill);
+}
+& .handle[data-v-f4be2bd4] {
+    position: absolute;
+    top: 50%;
+    left: var(--v087094b8);
+    width: var(--kds-dimension-icon-0-75x);
+    height: var(--kds-dimension-icon-0-75x);
+    pointer-events: none;
+    border: var(--kds-border-color-picker-handle-initial);
+    border-radius: var(--kds-border-radius-container-pill);
+    box-shadow: var(--kds-elevation-level-3);
+    transform: translate(-50%, -50%);
+}
+}
+.kds-color-picker-slider[data-v-f4be2bd4]:focus {
+  outline: none;
+}
+.kds-color-picker-slider:focus .handle[data-v-f4be2bd4],
+.kds-color-picker-slider:focus-visible .handle[data-v-f4be2bd4] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+
+.kds-color-picker[data-v-2daeaa68] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-1x);
+  width: calc(206px + 2 * var(--kds-spacing-container-0-75x));
+  max-width: 100%;
+  padding: var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.colorspace[data-v-2daeaa68] {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  touch-action: none;
+  cursor: crosshair;
+  user-select: none;
+  outline: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.handle[data-v-2daeaa68] {
+  position: absolute;
+  width: var(--kds-dimension-icon-0-75x);
+  height: var(--kds-dimension-icon-0-75x);
+  pointer-events: none;
+  border: var(--kds-border-color-picker-handle-initial);
+  border-radius: var(--kds-border-radius-container-pill);
+  box-shadow: var(--kds-elevation-level-3);
+  transform: translate(-50%, -50%);
+}
+.colorspace[data-v-2daeaa68]:focus {
+  outline: none;
+}
+.colorspace:focus .handle[data-v-2daeaa68],
+.colorspace:focus-visible .handle[data-v-2daeaa68] {
+  outline: var(--kds-border-action-focused);
+  outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
+}
+.hue[data-v-2daeaa68] {
+  background: linear-gradient(
+    90deg,
+    hsl(0deg 100% 50%) 0%,
+    hsl(60deg 100% 50%) 17%,
+    hsl(120deg 100% 50%) 33%,
+    hsl(180deg 100% 50%) 50%,
+    hsl(240deg 100% 50%) 67%,
+    hsl(300deg 100% 50%) 83%,
+    hsl(360deg 100% 50%) 100%
+  );
+}
+.alpha[data-v-2daeaa68] {
+  background-image: var(--v535b907d);
+  background-size:
+    100% 100%,
+    calc(var(--kds-dimension-component-height-0-75x) / 2)
+      calc(var(--kds-dimension-component-height-0-75x) / 2);
+}
+.value-inputs {
+&[data-v-2daeaa68] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  }
+&[data-v-2daeaa68] > * {
+    flex: 1 1 0;
+    min-width: 0;
+}
+}
+
+.kds-date-picker-grid[data-v-51807b35] {
+  width: 100%;
+}
+.kds-date-picker-header-row[data-v-51807b35] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.kds-date-picker-day-grid[data-v-51807b35] {
+  display: grid;
+  row-gap: var(--kds-spacing-container-0-5x);
+}
+.kds-date-picker-row[data-v-51807b35] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-items: center;
+}
+.kds-date-picker-weekday[data-v-51807b35] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--kds-dimension-component-height-1-5x);
+  font: var(--kds-font-base-title-small-strong);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.kds-date-picker-day {
+&[data-v-51807b35] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1-5x);
+  height: var(--kds-dimension-component-height-1-5x);
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kds-core-font-weight-medium);
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: var(--kds-core-border-width-xs) solid transparent;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-51807b35]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-51807b35]:hover:not(:disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-51807b35]:active:not(:disabled) {
+    background-color: var(--kds-color-background-neutral-active);
+}
+}
+.kds-date-picker-day-offset[data-v-51807b35] {
+  color: var(--kds-color-text-and-icon-subtle);
+}
+.kds-date-picker-day-disabled[data-v-51807b35] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.kds-date-picker-day-today[data-v-51807b35] {
+  font-style: italic;
+  color: var(--kds-color-text-and-icon-selected);
+}
+.kds-date-picker-day-selected {
+&[data-v-51807b35] {
+  font-weight: var(--kds-core-font-weight-medium);
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+  border-color: var(--kds-color-border-selected-bold);
+  }
+&[data-v-51807b35]:hover:not(:disabled) {
+    background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-51807b35]:active:not(:disabled) {
+    background-color: var(--kds-color-background-selected-active);
+}
+}
+
+.kds-date-picker-grid-simple[data-v-63d96e84] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--kds-spacing-container-0-75x);
+  width: 100%;
+  height: 100%;
+}
+.kds-date-picker-grid-row[data-v-63d96e84] {
+  display: contents;
+}
+.kds-date-picker-cell {
+&[data-v-63d96e84] {
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kds-core-font-weight-medium);
+  color: inherit;
+  text-align: center;
+  cursor: pointer;
+  background: transparent;
+  border: var(--kds-core-border-width-xs) solid transparent;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-63d96e84]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-active);
+}
+}
+.kds-date-picker-cell-disabled[data-v-63d96e84] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.kds-date-picker-cell-selected {
+&[data-v-63d96e84] {
+  font-weight: var(--kds-core-font-weight-medium);
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+  border-color: var(--kds-color-border-selected-bold);
+  }
+&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-active);
+}
+}
+
+.kds-date-picker-grid-simple[data-v-270d55b9] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--kds-spacing-container-0-5x);
+  width: 100%;
+  height: 100%;
+}
+.kds-date-picker-grid-row[data-v-270d55b9] {
+  display: contents;
+}
+.kds-date-picker-cell {
+&[data-v-270d55b9] {
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kds-core-font-weight-medium);
+  color: inherit;
+  text-align: center;
+  cursor: pointer;
+  background: transparent;
+  border: var(--kds-core-border-width-xs) solid transparent;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  }
+&[data-v-270d55b9]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
+}
+&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-active);
+}
+}
+.kds-date-picker-cell-disabled[data-v-270d55b9] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.kds-date-picker-cell-selected {
+&[data-v-270d55b9] {
+  font-weight: var(--kds-core-font-weight-medium);
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+  border-color: var(--kds-color-border-selected-bold);
+  }
+&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-hover);
+}
+&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-active);
+}
+}
+
+.kds-date-picker[data-v-e46d7e18] {
+  width: var(--kds-dimension-component-width-16x);
+  padding: var(--kds-spacing-container-0-75x);
+  font-family: var(--kds-core-font-family-roboto);
+  font-size: var(--kds-core-font-size-0-75x);
+  color: var(--kds-color-text-and-icon-neutral);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-date-picker-header[data-v-e46d7e18] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kds-spacing-container-0-75x);
+}
+.kds-date-picker-nav-block[data-v-e46d7e18] {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+}
+.kds-date-picker-header-label[data-v-e46d7e18] {
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+}
+.kds-date-picker-header-static-label[data-v-e46d7e18] {
+  flex: 1;
+  min-width: 0;
+  font-weight: var(--kds-core-font-weight-medium);
+  text-align: center;
+}
+.kds-date-picker-body[data-v-e46d7e18] {
+  display: flex;
+
+  /* Lock height to the day grid footprint:
+     7 rows of height-1-5x (1 header + 6 day rows) + 5 row gaps of 0-5x
+     (no gap between header and first day row). */
+  height: calc(
+    7 * var(--kds-dimension-component-height-1-5x) + 5 *
+      var(--kds-spacing-container-0-5x)
+  );
+}
+
+.kds-date-time-format-popover[data-v-8c697d02] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--kds-spacing-container-0-75x);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-date-time-format-popover-list[data-v-8c697d02] {
+  width: var(--kds-dimension-component-width-16x);
+  min-width: 100%;
+  max-width: 100%;
+  height: var(--kds-dimension-component-height-12x);
+}
+
+.kds-search-results-container[data-v-aec3e3d0] {
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+textarea {
+&[data-v-36211819] {
+  box-sizing: border-box;
+  width: 100%;
+  padding: calc(
+    var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+  );
+  overflow: hidden;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  resize: none;
+  outline: none;
+  scrollbar-width: none;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  -ms-overflow-style: none;
+}
+&.invalid[data-v-36211819] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-36211819]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&:disabled {
+&[data-v-36211819] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+&[data-v-36211819]::placeholder {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+&[data-v-36211819]:hover:not(:disabled, :focus) {
+    background: var(--kds-color-background-input-hover);
+}
+&[data-v-36211819]:focus:not(:disabled) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+textarea[data-v-36211819]::-webkit-scrollbar {
+  display: none;
+}
+
+.kds-time-picker[data-v-c2bc1234] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+  width: var(--kds-dimension-component-width-16x);
+  padding: var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-time-picker-fields[data-v-c2bc1234] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: flex-start;
+}
+.kds-time-picker-field[data-v-c2bc1234] {
+  flex: 1;
+  min-width: var(--kds-dimension-component-width-4x);
+}
+.kds-time-picker-field-trash[data-v-c2bc1234] {
+  margin-top: calc(
+    var(--kds-dimension-component-height-1x) +
+      var(--kds-spacing-input-label-spacing-bottom)
+  );
+}
+.kds-time-picker-divider[data-v-c2bc1234] {
+  width: 100%;
+}
+.kds-time-picker-actions[data-v-c2bc1234] {
+  display: flex;
+  justify-content: center;
+}
+
+.kds-interval-popover[data-v-02541fd1] {
+  display: flex;
+  flex-direction: column;
+  width: var(--kds-dimension-component-width-17-5x);
+  max-width: 100%;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-interval-popover-header {
+&[data-v-02541fd1] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-37x)
+    var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
+  }
+.kds-interval-popover-title[data-v-02541fd1] {
+    font: var(--kds-font-base-title-medium);
+    color: var(--kds-color-text-and-icon-neutral);
+}
+}
+.kds-interval-popover-divider[data-v-02541fd1] {
+  padding-bottom: calc(
+    var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
+  );
+  border-bottom: var(--kds-border-base-subtle);
+}
+.kds-interval-popover-content {
+&[data-v-02541fd1] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+  padding: var(--kds-spacing-container-0-75x);
+  }
+.kds-interval-popover-direction-switch[data-v-02541fd1] {
+    align-self: center;
+}
+.kds-interval-popover-grid[data-v-02541fd1] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-75x);
+}
+}
+
+.kds-dropdown-trigger-button {
+&[data-v-1bb2d375] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--kds-dimension-component-height-1-75x);
+  padding: 0
+    calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs));
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  background: var(--kds-color-background-input-initial);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+&[data-v-1bb2d375]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&.error[data-v-1bb2d375] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-1bb2d375]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: default;
+    border: var(--kds-border-action-disabled);
+    border-color: var(--kds-color-border-disabled);
+}
+&[data-v-1bb2d375]:not(:disabled, :focus):hover {
+    background: var(--kds-color-background-input-hover);
+}
+}
+.leading[data-v-1bb2d375] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-width-1x);
+  margin-left: var(--kds-spacing-container-0-12x);
+}
+.text {
+&[data-v-1bb2d375] {
+  flex: 1 0 0;
+  min-width: 0;
+  padding: var(--kds-spacing-container-0-25x);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  white-space: nowrap;
+}
+&.placeholder[data-v-1bb2d375] {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.missing[data-v-1bb2d375] {
+    color: var(--kds-color-text-and-icon-danger);
+}
+}
+.trailing[data-v-1bb2d375] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding-right: calc(
+    var(--kds-spacing-container-0-12x) + 2 * var(--kds-core-border-width-xs)
+  );
+}
+
+.kds-dropdown-container[data-v-cdb20fd2] {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-dropdown-container-sticky-top[data-v-cdb20fd2] {
+  padding: var(--kds-spacing-container-0-25x);
+  background-color: var(--kds-color-surface-default);
+  border-bottom: var(--kds-border-base-subtle);
+}
+.kds-dropdown-container-list {
+&[data-v-cdb20fd2] {
+  max-height: var(--kds-dimension-component-height-12x);
+  }
+&.multiline[data-v-cdb20fd2] {
+    max-height: var(--kds-dimension-component-height-20x);
+}
+}
+
+.kds-list-item-button {
+&[data-v-21fb5571] {
+  position: relative;
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+.label[data-v-21fb5571] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+&[data-v-21fb5571]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    pointer-events: none;
+    cursor: default;
+}
+&[data-v-21fb5571]:focus-visible:not(:disabled) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-21fb5571]:hover:not(:disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-21fb5571]:active:not(:disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+}
+
+.kds-multi-select-dropdown-options[data-v-68fe366f] {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--kds-dimension-component-width-12x);
+  background: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+.kds-multi-select-dropdown-search[data-v-68fe366f] {
+  padding: var(--kds-spacing-container-0-25x);
+  border-bottom: var(--kds-border-base-subtle);
+}
+.kds-multi-select-dropdown-list {
+&[data-v-68fe366f] {
+  max-height: var(--kds-dimension-component-height-12x);
+  }
+&.multiline[data-v-68fe366f] {
+    max-height: var(--kds-dimension-component-height-20x);
+}
+}
+.kds-multi-select-dropdown-footer[data-v-68fe366f] {
+  padding: var(--kds-spacing-container-0-25x);
+  border-top: var(--kds-border-base-subtle);
+}
+
+.kds-resize-handle-area[data-v-df3803d4] {
+  display: flex;
+  gap: var(--v1dcb931e);
+  justify-content: space-around;
+}
+.kds-resize-handle {
+&[data-v-df3803d4] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--v4bcf7fe4);
+  block-size: calc(2 * var(--kds-spacing-container-0-37x));
+  padding: 0;
+  appearance: none;
+  touch-action: none;
+  cursor: row-resize;
+  user-select: none;
+  background: none;
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-25x);
+  -webkit-touch-callout: none;
+  }
+&[data-v-df3803d4]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+& .kds-resize-handle-line[data-v-df3803d4] {
+    inline-size: 100%;
+    block-size: 0;
+    border-top: var(--kds-border-resize-handle-initial);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&:hover > .kds-resize-handle-line[data-v-df3803d4] {
+    border-top: var(--kds-border-resize-handle-hover);
+}
+&:active > .kds-resize-handle-line[data-v-df3803d4] {
+    border-top: var(--kds-border-resize-handle-active);
+}
+}
+.kds-resize-handle-area:hover > .kds-resize-handle > .kds-resize-handle-line[data-v-df3803d4] {
+  border-top: var(--kds-border-resize-handle-hover);
+}
+
+.kds-resize-container {
+&[data-v-46b33b01] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-37x);
+}
+&.dragging[data-v-46b33b01] {
+    user-select: none;
+}
+}
+.kds-resize-container-content[data-v-46b33b01] {
+  inline-size: 100%;
+}
+
+.kds-multiselect-list-box {
+&[data-v-2c5e2dda] {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  min-block-size: 0;
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-action-input);
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.disabled[data-v-2c5e2dda] {
+    border: var(--kds-border-action-disabled);
+}
+&.error[data-v-2c5e2dda] {
+    border: var(--kds-border-action-error);
+}
+&[data-v-2c5e2dda]:has(:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-multiselect-list-box-list {
+&[data-v-2c5e2dda] {
+  position: relative;
+  flex-grow: 1;
+  padding: calc(
+    var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)
+  );
+  margin: 0;
+  overflow-y: auto;
+}
+&[data-v-2c5e2dda]:focus {
+    outline: none;
+}
+}
+.kds-multiselect-list-box-item {
+&[data-v-2c5e2dda] {
+  height: var(--kds-dimension-component-height-1-5x);
+  margin-top: var(--kds-spacing-container-0-10x);
+}
+&.kds-multiselect-list-box-item-first[data-v-2c5e2dda] {
+    margin-top: 0;
+}
+}
+.kds-multiselect-list-box-content-grid[data-v-2c5e2dda] {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: calc(100% - 2 * var(--kds-core-border-width-xs));
+}
+.kds-multiselect-list-box-content[data-v-2c5e2dda] {
+  min-width: 0;
+}
+.kds-multiselect-sticky-bottom[data-v-2c5e2dda] {
+  position: sticky;
+  bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  min-width: 0;
+  padding: var(--kds-spacing-container-0-25x) 0;
+  margin-bottom: calc(-1 * var(--kds-spacing-container-0-25x));
+  background: var(--kds-color-surface-default);
+  border-top: var(--kds-border-base-subtle);
+}
+.kds-multiselect-empty[data-v-2c5e2dda] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.kds-twin-list-body[data-v-11062d8e] {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) var(--kds-dimension-component-width-1-5x)
+    minmax(0, 1fr);
+  gap: var(--kds-spacing-container-0-25x);
+}
+.kds-list-column {
+&[data-v-11062d8e] {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  }
+& .kds-list-box[data-v-11062d8e] {
+    flex: 1;
+    min-block-size: 0;
+}
+}
+.kds-list-header[data-v-11062d8e] {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: var(--kds-spacing-input-label-spacing-bottom);
+}
+.kds-list-label[data-v-11062d8e] {
+  font: var(--kds-font-base-title-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+.kds-list-count[data-v-11062d8e] {
+  font: var(--kds-font-base-title-xsmall);
+  color: var(--kds-color-text-and-icon-muted);
+}
+.kds-button-column[data-v-11062d8e] {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--kds-spacing-container-4x);
+}
+
+.kds-twin-list[data-v-1a9327b5] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-37x);
+}
+
+.kds-sortable-list-box-wrapper[data-v-ee7b63e2] {
+  display: flex;
+  flex-direction: column;
+}
+.kds-sortable-top-buttons[data-v-ee7b63e2] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--kds-spacing-container-0-75x);
+  padding-bottom: var(--kds-spacing-container-0-37x);
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-sortable-top-buttons-left[data-v-ee7b63e2] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+}
+.kds-sortable-footer-buttons[data-v-ee7b63e2] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: center;
+  padding: var(--kds-spacing-container-0-5x) 0;
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+
+.kds-info-popover-content[data-v-951f2a2b] {
+  max-width: var(--kds-dimension-component-width-25x);
+  padding: var(--kds-spacing-container-0-75x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+
+.info-toggle-button {
+&[data-v-2e9ef96a] {
+  --bg-initial: transparent;
+  --bg-hover: var(--kds-color-background-neutral-hover);
+  --bg-active: var(--kds-color-background-neutral-active);
+  --border: var(--kds-border-action-transparent);
+  --icon-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-height-1x);
+  padding: 0;
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: var(--bg-initial);
+  border: var(--border);
+  border-radius: var(--kds-border-radius-container-0-12x);
+  opacity: 1;
+}
+&.hidden[data-v-2e9ef96a] {
+    opacity: 0;
+}
+&[data-v-2e9ef96a]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-2e9ef96a]:hover {
+    background-color: var(--bg-hover);
+}
+&[data-v-2e9ef96a]:active {
+    background-color: var(--bg-active);
+}
+&.selected[data-v-2e9ef96a] {
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+    --border: var(--kds-border-action-selected);
+    --icon-color: var(--kds-color-text-and-icon-selected);
+}
+}
+
+.kds-variable-popover {
+&[data-v-8a0c56d0] {
+  width: var(--kds-dimension-component-width-25x);
+  max-width: 100%;
+  max-height: var(--kds-dimension-component-height-20x);
+  padding: var(--kds-spacing-container-0-75x);
+  overflow-y: auto;
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  white-space: pre-wrap;
+  background-color: var(--kds-color-surface-default);
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+}
+&[data-v-8a0c56d0]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.variable-toggle-button {
+&[data-v-b6d29842] {
+  --bg-initial: var(--kds-color-background-neutral-initial);
+  --bg-hover: var(--kds-color-background-neutral-hover);
+  --bg-active: var(--kds-color-background-neutral-active);
+  --border: var(--kds-border-action-transparent);
+  --icon-color: var(--kds-color-text-and-icon-neutral);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--kds-dimension-component-width-1x);
+  height: var(--kds-dimension-component-height-1x);
+  padding: 0;
+  color: var(--icon-color);
+  cursor: pointer;
+  background-color: var(--bg-initial);
+  border: var(--border);
+  border-radius: var(--kds-border-radius-container-0-12x);
+  opacity: 1;
+}
+&.hidden[data-v-b6d29842] {
+    opacity: 0;
+}
+&[data-v-b6d29842]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&[data-v-b6d29842]:hover {
+    background-color: var(--bg-hover);
+}
+&[data-v-b6d29842]:active {
+    background-color: var(--bg-active);
+}
+&.pressed-or-set[data-v-b6d29842] {
+    --bg-initial: var(--kds-color-background-selected-initial);
+    --bg-hover: var(--kds-color-background-selected-hover);
+    --bg-active: var(--kds-color-background-selected-active);
+    --border: var(--kds-border-action-selected);
+    --icon-color: var(--kds-color-text-and-icon-success);
+}
+&.error[data-v-b6d29842] {
+    --bg-initial: var(--kds-color-background-danger-initial);
+    --bg-hover: var(--kds-color-background-danger-hover);
+    --bg-active: var(--kds-color-background-danger-active);
+    --border: var(--kds-border-action-error);
+    --icon-color: var(--kds-color-text-and-icon-danger);
+}
+}
+
+.kds-accordion[data-v-96dcd299] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+  width: 100%;
+}
+.kds-accordion-item[data-v-96dcd299] {
+  padding: var(--kds-spacing-container-0-25x);
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.kds-accordion-header {
+&[data-v-96dcd299] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-height: var(--kds-dimension-component-height-2-25x);
+  padding: 0 var(--kds-spacing-container-0-75x) 0
+    var(--kds-spacing-container-1x);
+  font: inherit;
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: left;
+  cursor: pointer;
+  list-style: none;
+  background: transparent;
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-25x);
+  }
+&[data-v-96dcd299]::-webkit-details-marker {
+    display: none;
+}
+&[data-v-96dcd299]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+&:not([aria-disabled="true"]) {
+&[data-v-96dcd299]:hover {
+      background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-96dcd299]:active {
+      background: var(--kds-color-background-neutral-active);
+}
+}
+&[aria-disabled="true"][data-v-96dcd299] {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: not-allowed;
+    background: var(--kds-color-background-neutral-initial);
+}
+}
+.kds-accordion-headline[data-v-96dcd299] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-title-small-strong);
+  white-space: nowrap;
+}
+.kds-accordion-headline-container[data-v-96dcd299] {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  min-width: 0;
+}
+.kds-accordion-content[data-v-96dcd299] {
+  padding: var(--kds-spacing-container-1x);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+
+.kds-card-header {
+&[data-v-09093cc0] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--kds-dimension-component-height-2-75x);
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1x);
+
+  /* push actions to the right if its the only element */
+}
+.actions[data-v-09093cc0],
+  .accessory[data-v-09093cc0] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-37x);
+}
+.actions[data-v-09093cc0] {
+    margin-left: auto;
+}
+& h6[data-v-09093cc0] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-large-strong);
+    white-space: nowrap;
+}
+}
+
+.kds-base-card {
+&[data-v-a1aff6d6] {
+  --kds-base-card-border-radius: var(--kds-border-radius-container-0-50x);
+  --kds-base-card-primary-action-z-index: 1;
+  --kds-base-card-secondary-action-z-index: 2;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  outline: none;
+  border-style: solid;
+  border-radius: var(--kds-base-card-border-radius);
+  isolation: isolate;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+&[data-v-a1aff6d6] [data-kds-card-primary-action] {
+    z-index: var(--kds-base-card-primary-action-z-index);
+    border-radius: var(--kds-base-card-border-radius);
+}
+&[data-v-a1aff6d6] [data-kds-card-secondary-action] {
+    position: relative;
+    z-index: var(--kds-base-card-secondary-action-z-index);
+}
+}
+
+/* Variant: Filled, Value: False */
+.variant-filled {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-surface-default);
+  border: var(--kds-border-base-subtle);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: False */
+.variant-outlined {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-base-muted);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: False */
+.variant-transparent {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-neutral-initial);
+  border: var(--kds-border-action-transparent);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    background: var(--kds-color-background-neutral-hover);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-neutral-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Filled, Value: True */
+.variant-filled.selected {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Outlined, Value: True */
+.variant-outlined.selected {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+/* Variant: Transparent, Value: True */
+.variant-transparent.selected {
+&[data-v-a1aff6d6] {
+  background: var(--kds-color-background-selected-initial);
+  border: var(--kds-border-action-selected);
+}
+&:hover.clickable[data-v-a1aff6d6] {
+    background: var(--kds-color-background-selected-initial);
+    box-shadow: var(--kds-elevation-level-3);
+}
+&.clickable[data-v-a1aff6d6]:has([data-kds-card-primary-action]:active) {
+    background: var(--kds-color-background-selected-active);
+    box-shadow: var(--kds-elevation-level-1);
+}
+}
+
+.kds-clickable-card {
+&[data-v-04004cbf] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-04004cbf] {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+&[data-v-04004cbf]:disabled {
+      cursor: default;
+}
+&[data-v-04004cbf]:focus {
+      outline: none;
+}
+}
+&[data-v-04004cbf]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-link-card {
+&[data-v-1696fd9e] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-1696fd9e] {
+    position: absolute;
+    inset: 0;
+    text-decoration: none;
+}
+&[data-v-1696fd9e]:focus {
+      outline: none;
+}
+}
+&[data-v-1696fd9e]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-selectable-card {
+&[data-v-af9b9bf6] {
+  position: relative;
+}
+& [data-kds-card-primary-action] {
+&[data-v-af9b9bf6] {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+&[data-v-af9b9bf6]:disabled {
+      cursor: default;
+}
+&[data-v-af9b9bf6]:focus {
+      outline: none;
+}
+}
+&[data-v-af9b9bf6]:has([data-kds-card-primary-action]:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+
+.kds-panel {
+&[data-v-d3124a50] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--kds-color-surface-default);
+}
+.kds-panel-header[data-v-d3124a50] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    padding: var(--kds-spacing-container-0-5x)
+      var(--kds-spacing-container-0-75x)
+      calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs));
+    border-bottom: var(--kds-border-base-subtle);
+}
+.kds-panel-headline[data-v-d3124a50] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+}
+.kds-panel-headline-text[data-v-d3124a50] {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--kds-font-base-title-medium-strong);
+    white-space: nowrap;
+}
+.kds-panel-header-trailing[data-v-d3124a50] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+    margin-left: auto;
+}
+.kds-panel-body {
+&[data-v-d3124a50] {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: var(--v2ddcad1c);
+}
+&[data-variant="padded"][data-v-d3124a50] {
+      padding: var(--kds-spacing-container-0-75x);
+}
+&[tabindex="0"][data-v-d3124a50]:focus-visible {
+      outline: var(--kds-border-action-focused);
+      outline-offset: var(--kds-spacing-offset-focus);
+      border-radius: var(--kds-border-radius-container-0-31x);
+}
+}
+.kds-panel-footer[data-v-d3124a50] {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--kds-spacing-container-0-25x);
+    justify-content: space-between;
+    padding: calc(
+        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+      )
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+    border-top: var(--kds-border-base-subtle);
+}
+.kds-panel-footer-leading[data-v-d3124a50],
+  .kds-panel-footer-trailing[data-v-d3124a50] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-25x);
+    align-items: center;
+}
+}
+
+.kds-tab-icon[data-v-91f95f5f] {
+  flex-shrink: 0;
+}
+.kds-tab-label[data-v-91f95f5f] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--kds-font-base-interactive-medium-strong);
+  white-space: nowrap;
+}
+.kds-tab {
+&[data-v-91f95f5f] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font: inherit;
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  background: var(--kds-color-background-neutral-initial);
+  border: none;
+  isolation: isolate;
+  }
+&[data-v-91f95f5f]:disabled {
+    color: var(--kds-color-text-and-icon-disabled);
+    cursor: not-allowed;
+}
+&[data-v-91f95f5f]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+    border-radius: var(--kds-border-radius-container-0-12x);
+}
+&.kds-tab-selected {
+&[data-v-91f95f5f] {
+    color: var(--kds-color-text-and-icon-selected);
+    }
+& .kds-tab-indicator[data-v-91f95f5f] {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      height: var(--kds-dimension-component-height-0-125x);
+      background: var(--kds-color-background-selected-bold-initial);
+      border: var(--kds-border-action-selected);
+      border-top-left-radius: var(--kds-border-radius-container-0-12x);
+      border-top-right-radius: var(--kds-border-radius-container-0-12x);
+}
+}
+&[data-v-91f95f5f]:hover:not(:disabled) {
+    color: var(--kds-color-text-and-icon-selected);
+}
+}
+.kds-tab-bar-wrapper {
+&[data-v-91f95f5f] {
+  --focus-ring-space: calc(
+    2px + var(--kds-spacing-offset-focus)
+  ); /* outline-width + outline-offset */
+
+  position: relative;
+  display: flow-root;
+  overflow: visible;
+  }
+&[data-v-91f95f5f]::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--kds-core-border-width-m);
+    pointer-events: none;
+    content: "";
+    background: var(--kds-color-border-subtle);
+}
+}
+.kds-tab-bar {
+&[data-v-91f95f5f] {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: var(--focus-ring-space);
+  margin: calc(-1 * var(--focus-ring-space));
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-radius: var(--kds-border-radius-container-none);
+  }
+&[data-v-91f95f5f]::-webkit-scrollbar {
+    display: none;
+}
+&:not(.kds-tab-bar-full-width) .kds-tab[data-v-91f95f5f] {
+    flex: 0 1 auto;
+    min-width: var(--v09be89a3);
+}
+&.kds-tab-bar-large .kds-tab-label[data-v-91f95f5f] {
+    font: var(--kds-font-base-interactive-large-strong);
+}
+&.kds-tab-bar-large .kds-tab-selected .kds-tab-label[data-v-91f95f5f] {
+    font: var(--kds-font-base-title-large);
+}
+&.kds-tab-bar-small,
+  &.kds-tab-bar-large {
+& .kds-tab-selected .kds-tab-icon[data-v-91f95f5f] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+}
+&.kds-tab-bar-small .kds-tab[data-v-91f95f5f] {
+    gap: var(--kds-spacing-container-0-37x);
+    height: var(--kds-dimension-component-height-1-75x);
+    padding: 0 var(--kds-spacing-container-0-5x);
+}
+&.kds-tab-bar-large .kds-tab[data-v-91f95f5f] {
+    gap: var(--kds-spacing-container-0-5x);
+    height: var(--kds-dimension-component-height-2-25x);
+    padding: 0 var(--kds-spacing-container-0-75x);
+}
+&.kds-tab-bar-full-width .kds-tab[data-v-91f95f5f] {
+    flex: 1;
+    justify-content: center;
+    width: 100%;
+}
+}
+
+@keyframes knight-rider-86829b28 {
+from {
+    background-position-x: 100%;
+}
+to {
+    background-position-x: -100%;
+}
+}
+.kds-loading-skeleton-item {
+&[data-v-86829b28] {
+  background-color: var(--kds-color-border-subtle);
+  background-image: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
+      0%,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 15%, transparent)
+      25%,
+    color-mix(in srgb, var(--kds-color-text-and-icon-neutral) 2%, transparent)
+      50%,
+    transparent 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 200% 100%;
+  animation: knight-rider-86829b28 2s linear 200ms infinite;
+}
+&.text[data-v-86829b28] {
+    height: var(--kds-dimension-component-height-0-75x);
+    border-radius: var(--kds-border-radius-container-pill);
+}
+&.icon-large[data-v-86829b28],
+  &.icon-medium[data-v-86829b28],
+  &.icon-small[data-v-86829b28] {
+    border-radius: var(--kds-border-radius-container-pill);
+}
+&.icon-large[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-1-25x);
+    height: var(--kds-dimension-component-height-1-25x);
+}
+&.icon-medium[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-1x);
+    height: var(--kds-dimension-component-height-1x);
+}
+&.icon-small[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-0-75x);
+    height: var(--kds-dimension-component-height-0-75x);
+}
+&.button-large[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-2-25x);
+    border-radius: var(--kds-border-radius-container-0-50x);
+}
+&.button-medium[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-1-75x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.button-small[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-1-5x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.button-xsmall[data-v-86829b28] {
+    width: var(--kds-dimension-component-width-4x);
+    height: var(--kds-dimension-component-height-1-25x);
+    border-radius: var(--kds-border-radius-container-0-25x);
+}
+&.input-with-label[data-v-86829b28] {
+    height: var(--kds-dimension-component-height-1-75x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+&.label[data-v-86829b28] {
+    width: 35%;
+    height: var(--kds-dimension-component-height-0-75x);
+    border-radius: var(--kds-border-radius-container-0-50x);
+}
+&.card[data-v-86829b28] {
+    height: 100%;
+    min-height: var(--kds-dimension-component-height-12x);
+    border-radius: var(--kds-border-radius-container-0-37x);
+}
+}
+
+.kds-loading-skeleton[data-v-e6597718] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v59c08829);
+}
+.kds-loading-skeleton-headline-with-paragraph {
+&[data-v-e6597718] {
+  display: grid;
+  gap: var(--kds-spacing-container-1-25x);
+  }
+& .headline[data-v-e6597718] {
+    width: 50%;
+    height: var(--kds-dimension-component-height-1x);
+}
+& .kds-loading-skeleton-paragraph-lines {
+&[data-v-e6597718] {
+    display: grid;
+    gap: var(--kds-spacing-container-0-75x);
+    }
+&[data-v-e6597718] > *:nth-child(2) {
+      width: 75%;
+}
+&[data-v-e6597718] > *:nth-child(3) {
+      width: 50%;
+}
+}
+}
+.kds-loading-skeleton-input-with-label[data-v-e6597718] {
+  display: grid;
+  gap: var(--kds-spacing-container-0-75x);
+}
+.kds-loading-skeleton-list-item {
+&[data-v-e6597718] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  width: 100%;
+  min-width: var(--kds-dimension-component-width-12x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
+  }
+& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+    min-width: 0;
+}
+&.kds-loading-skeleton-list-item-large {
+&[data-v-e6597718] {
+    padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x);
+    }
+& .kds-loading-skeleton-list-item-text {
+&[data-v-e6597718] {
+      justify-content: center;
+      }
+& .text[data-v-e6597718] {
+        height: var(--kds-dimension-component-height-0-88x);
+}
+}
+}
+&.kds-loading-skeleton-list-item-small {
+&[data-v-e6597718] {
+    gap: var(--kds-spacing-container-0-5x);
+    align-items: start;
+    padding: calc(
+        var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)
+      )
+      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x);
+    }
+& .kds-loading-skeleton-list-item-text[data-v-e6597718] {
+      justify-content: flex-start;
+}
+}
+&.kds-loading-skeleton-list-item-large-with-subtext {
+&[data-v-e6597718] {
+    align-items: center;
+    }
+& .kds-loading-skeleton-list-item-text {
+&[data-v-e6597718] {
+      justify-content: center;
+      }
+& .text[data-v-e6597718] {
+        height: var(--kds-dimension-component-height-0-75x);
+}
+}
+}
+}
+
+.kds-nav-item {
+&[data-v-17711664] {
+  position: relative;
+  height: var(--kds-dimension-component-height-1-75x);
+  min-height: var(--kds-dimension-component-height-1-5x);
+  background: var(--kds-color-background-neutral-initial);
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[data-v-17711664]:has(.kds-nav-button:focus-visible) {
+    outline: var(--kds-border-action-focused);
+    outline-offset: calc(-1 * var(--kds-core-border-width-m));
+}
+& .kds-nav-button {
+&[data-v-17711664] {
+
+    display: flex;
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--v29854424) 0 var(--kds-spacing-container-0-75x);
+    color: var(--kds-color-text-and-icon-neutral);
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    border: none;
+}
+&[data-v-17711664]:focus-visible {
+      outline: none;
+}
+& .label[data-v-17711664] {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--kds-font-base-interactive-medium);
+      text-align: left;
+      white-space: nowrap;
+}
+}
+& .trailing-items[data-v-17711664] {
+    position: absolute;
+    top: 0;
+    right: var(--kds-spacing-container-0-75x);
+    display: flex;
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-v-17711664]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-17711664] {
+    background: var(--kds-color-background-selected-initial);
+}
+& .kds-nav-button[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+& .trailing-items[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+&[data-v-17711664]::before {
+      position: absolute;
+      top: var(--kds-spacing-container-0-37x);
+      left: 0;
+      width: var(--kds-dimension-component-width-0-125x);
+      height: var(--kds-dimension-component-height-1x);
+      content: "";
+      background: var(--kds-color-background-selected-bold-initial);
+      border-top-right-radius: var(--kds-border-radius-container-0-12x);
+      border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
+}
+&[data-v-17711664]:hover:not(.disabled) {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-17711664]:has(.kds-nav-button:active):not(.disabled) {
+      background: var(--kds-color-background-selected-active);
+}
+}
+&.disabled {
+&[data-v-17711664] {
+    cursor: default;
+}
+& .kds-nav-button[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-disabled);
+      cursor: default;
+}
+& .trailing-items[data-v-17711664] {
+      color: var(--kds-color-text-and-icon-disabled);
+}
+}
+}
+
+.kds-navigation {
+&[data-v-6cc9519f] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-25x);
+}
+.nav-items[data-v-6cc9519f] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kds-spacing-container-0-25x);
+}
+}
+
+.kds-breadcrumb-item[data-v-fd7537fc] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+  margin: 0;
+  font: var(--kds-font-base-interactive-small);
+  color: var(
+    --kds-breadcrumb-item-color,
+    var(--kds-color-text-and-icon-subtle)
+  );
+  text-decoration: none;
+  background: none;
+  border: none;
+}
+.breadcrumb-label[data-v-fd7537fc] {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+  white-space: nowrap;
+}
+.breadcrumb-icon[data-v-fd7537fc] {
+  flex-shrink: 0;
+}
+span.kds-breadcrumb-item[data-v-fd7537fc] {
+  cursor: default;
+}
+a.kds-breadcrumb-item,
+button.kds-breadcrumb-item {
+&[data-v-fd7537fc] {
+  cursor: pointer;
+  border-radius: var(--kds-border-radius-container-0-12x);
+  }
+&[data-v-fd7537fc]:hover {
+    color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-v-fd7537fc]:focus-visible {
+    outline: var(--kds-border-action-focused);
+    outline-offset: var(--kds-spacing-offset-focus);
+}
+}
+.kds-breadcrumb-item:hover .breadcrumb-label[data-v-fd7537fc],
+.kds-breadcrumb-item:focus-visible .breadcrumb-label[data-v-fd7537fc] {
+  text-overflow: clip;
+}
+
+ol[data-v-e93667af] {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: var(--kds-spacing-container-none);
+  padding-top: var(--kds-spacing-container-0-12x);
+  padding-bottom: var(--kds-spacing-container-0-12x);
+  padding-left: var(--kds-spacing-container-0-25x);
+  margin: var(--kds-spacing-container-none);
+  overflow-x: hidden;
+  white-space: nowrap;
+  list-style: none;
+}
+li {
+&[data-v-e93667af] {
+  /*
+     * Width is controlled by `useBreadcrumbAdaptiveLayout()` via the CSS
+     * custom properties `--kds-bc-max-width` (resting cap) and
+     * `--kds-bc-natural-width` (full width used while hovered/focused). Flex
+     * shrink/grow is disabled so the script is the single source of truth.
+     */
+  --kds-bc-floor: calc(
+    var(--kds-dimension-icon-1x) /* leading icon */ +
+      var(--kds-spacing-container-0-25x) /* item gap */ +
+      var(--kds-dimension-icon-0-75x) /* chevron */ + 2 *
+      var(--kds-spacing-container-0-12x) /* chevron margin */
+  );
+
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: var(--kds-bc-floor);
+  max-width: var(--kds-bc-max-width, fit-content);
+  min-height: var(--kds-dimension-component-height-1-25x);
+  font: var(--kds-font-base-subtext-medium);
+  color: var(--kds-color-text-and-icon-neutral);
+  transition: max-width 0.1s;
+
+  /*
+     * Hover/focus expands an ellipsed item back to its natural width. The
+     * surrounding items keep their resting widths and are simply pushed out to
+     * the right; `ol { overflow: hidden }` clips the overflow so the
+     * breadcrumb never grows beyond its container. Releasing the hover/focus
+     * snaps everything back into place via the `max-width` transition.
+     */
+
+  /* Current item: override the item color token so a/button inherit it. */
+  }
+&[data-v-e93667af]:last-child {
+    --kds-bc-floor: calc(
+      var(--kds-dimension-icon-1x) /* leading icon */ +
+        var(--kds-spacing-container-0-25x) /* item gap */
+    );
+}
+&[data-v-e93667af]:hover,
+  &[data-v-e93667af]:focus-within {
+    max-width: var(--kds-bc-natural-width, fit-content);
+}
+&.current[data-v-e93667af] {
+    --kds-breadcrumb-item-color: var(--kds-color-text-and-icon-neutral);
+}
+.path-separator[data-v-e93667af] {
+    flex-shrink: 0;
+    align-self: center;
+    margin-inline: var(--kds-spacing-container-0-12x);
+    color: var(--kds-color-text-and-icon-muted);
+}
+}
+
+.modal-header {
+&[data-v-62740dc9] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
+    var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
+  font: var(--kds-font-base-title-medium-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+& .modal-header-headline[data-v-62740dc9] {
+    flex: 1 1 auto;
+}
+}
+.modal-body {
+&[data-v-62740dc9] {
+  --modal-padding-left: var(--kds-spacing-container-1-5x);
+  --modal-padding-right: var(--kds-spacing-container-1-5x);
+  --modal-padding-top: var(--kds-spacing-container-0-5x);
+  --modal-padding-bottom: var(--kds-spacing-container-1x);
+  --modal-gap: var(--kds-spacing-container-1x);
+
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: var(--v81addf0a);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+&[data-variant="padded"][data-v-62740dc9] {
+    gap: var(--modal-gap);
+    padding: var(--modal-padding-top) var(--modal-padding-right)
+      var(--modal-padding-bottom) var(--modal-padding-left);
+}
+}
+.modal-footer[data-v-62740dc9] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  justify-content: right;
+  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
+}
+
+/** see: https://github.com/whatwg/html/issues/7732  */
+body:has(dialog.modal[open]) {
+  overflow: hidden;
+}
+
+.kds-modal {
+&[data-v-f4a6776f] {
+  /* rule is broken it complains about local variables for no reason */
+  /* stylelint-disable csstools/value-no-unknown-custom-properties */
+  --modal-full-size: 95%;
+  --modal-backdrop-animation-time: 125ms;
+
+  display: flex;
+  flex-direction: column;
+  width: min(var(--modal-full-size), var(--modal-width));
+  height: var(--modal-height);
+  max-height: var(--modal-full-size);
+  padding: 0;
+  overflow: var(--v5b2d4b6a);
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  background-color: var(--kds-color-surface-default);
+  border: none;
+  border-radius: var(--kds-border-radius-container-0-37x);
+  box-shadow: var(--kds-elevation-level-3);
+
+  /** Animation */
+  opacity: 0;
+  transform: scale(var(--modal-scale-base));
+  transition: var(--modal-animation-time) allow-discrete;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-property: display, opacity, overlay, transform;
+
+  /* hide if its not open */
+}
+&.width-small[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-25x);
+    --modal-animation-time: 100ms;
+    --modal-scale-base: 0.85;
+}
+&.width-medium[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-32x);
+    --modal-animation-time: 140ms;
+    --modal-scale-base: 0.88;
+}
+&.width-large[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-45x);
+    --modal-animation-time: 210ms;
+    --modal-scale-base: 0.88;
+}
+&.width-xlarge[data-v-f4a6776f] {
+    --modal-width: var(--kds-dimension-component-width-61x);
+    --modal-animation-time: 300ms;
+    --modal-scale-base: 0.88;
+}
+&.width-full[data-v-f4a6776f] {
+    --modal-width: var(--modal-full-size);
+    --modal-animation-time: 350ms;
+    --modal-scale-base: 0.92;
+}
+&.height-full[data-v-f4a6776f] {
+    --modal-height: var(--modal-full-size);
+}
+&.height-auto[data-v-f4a6776f] {
+    --modal-height: fit-content;
+}
+&[data-v-f4a6776f]:not([open]) {
+    display: none;
+}
+&[data-v-f4a6776f]:focus-visible,
+  &[data-v-f4a6776f]:focus {
+    outline: none;
+}
+&[data-v-f4a6776f]::backdrop {
+    background: var(--kds-color-blanket-default);
+    opacity: 0;
+    transition: var(--modal-animation-time) allow-discrete;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transition-property: display, opacity, overlay;
+}
+&[open][data-v-f4a6776f]::backdrop {
+    opacity: 1;
+}
+&[open][data-v-f4a6776f] {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+
+/** Animation starting styles */
+@starting-style {
+.kds-modal {
+&[data-v-f4a6776f] {
+    opacity: 1;
+    transform: scale(1);
+}
+&[open][data-v-f4a6776f] {
+      opacity: 0;
+      transform: scale(var(--modal-scale-base));
+}
+&[data-v-f4a6776f]::backdrop {
+      opacity: 1;
+}
+&[open][data-v-f4a6776f]::backdrop {
+      opacity: 0;
+}
+}
+}
+
+.ask-again[data-v-41fc8d84] {
+  padding: var(--kds-spacing-container-0-5x) 0 0 0;
+}
+.flush-left[data-v-41fc8d84] {
+  margin-right: auto;
+}
+
+.kds-button-group-measure[data-v-a945c295] {
+  position: absolute;
+  display: flex;
+  visibility: hidden;
+  gap: var(--kds-spacing-container-0-5x);
+  white-space: nowrap;
+}
+.kds-button-group {
+&[data-v-a945c295] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  }
+&.left[data-v-a945c295] {
+    justify-content: flex-start;
+}
+&.right[data-v-a945c295] {
+    justify-content: flex-end;
+}
+&.middle[data-v-a945c295] {
+    justify-content: center;
+}
+}
+
+.description {
+&[data-v-43067f23] {
+  font: var(--kds-font-base-body-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  overflow-wrap: anywhere;
+
+  /* stylelint-disable knime/no-deep-nesting */
+}
+&.plain[data-v-43067f23] {
+    white-space: pre-line;
+}
+&[data-v-43067f23]  {
+p {
+& {
+      padding: 0;
+      margin: 0 0 var(--kds-spacing-container-0-37x);
+      font: var(--kds-font-base-body-small);
+}
+&:last-child {
+        margin-bottom: 0;
+}
+}
+strong,
+    b {
+      font-weight: var(--kds-core-font-weight-strong);
+}
+i,
+    em {
+      font-style: italic;
+}
+h3 {
+      margin: 0;
+      font: var(--kds-font-base-body-large-strong);
+}
+h4 {
+      margin: 0;
+      font: var(--kds-font-base-body-medium-strong);
+}
+pre {
+& {
+      width: fit-content;
+      padding: var(--kds-spacing-container-0-75x);
+      font: var(--kds-font-base-code-xsmall);
+      background: var(--kds-color-surface-subtle);
+      border-radius: var(--kds-border-radius-container-0-25x);
+}
+& > code {
+        padding: 0;
+        background: none;
+}
+}
+& :not(pre) > code {
+      padding: var(--kds-spacing-container-0-12x)
+        var(--kds-spacing-container-0-25x);
+      font: var(--kds-font-base-code-xsmall);
+      background: var(--kds-color-surface-subtle);
+      box-decoration-break: clone;
+      border-radius: var(--kds-border-radius-container-0-12x);
+}
+
+    /** keep in sync with KdsLink */
+a {
+& {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: fit-content;
+      max-width: 100%;
+      padding: var(--kds-spacing-container-none)
+        var(--kds-spacing-container-0-10x);
+      font: var(--kds-font-base-body-small);
+      color: var(--kds-color-text-and-icon-neutral);
+      white-space: nowrap;
+      text-decoration-line: underline;
+      cursor: pointer;
+      border-radius: var(--kds-border-radius-container-0-12x);
+
+      /** internal links */
+
+      /** external links */
+}
+&:focus-visible {
+        outline: var(--kds-border-action-focused);
+        outline-offset: var(--kds-spacing-container-none);
+}
+&[href^="http"] {
+& {
+        --link-color: var(--kds-color-text-and-icon-selected);
+
+        color: var(--link-color);
+}
+&:visited {
+          --link-color: var(--kds-color-text-and-icon-info);
+
+          color: var(--link-color);
+}
+&:hover {
+          --link-color: var(--kds-color-text-and-icon-primary-inverted);
+
+          color: var(--link-color);
+          background-color: var(--kds-color-background-primary-bold-hover);
+}
+&:active {
+          --link-color: var(--kds-color-text-and-icon-selected-inverted);
+
+          color: var(--link-color);
+          background-color: var(--kds-color-background-primary-bold-active);
+}
+&::after {
+          display: block;
+          width: var(--kds-dimension-icon-0-56x);
+          height: var(--kds-dimension-icon-0-56x);
+          margin-left: var(--kds-spacing-container-0-12x);
+          content: "";
+          background-color: var(--link-color);
+          mask-image: var(--v0c7d182f);
+          mask-repeat: no-repeat;
+          mask-size: contain;
+}
+}
+&:not([href^="http"]) {
+& {
+        color: var(--kds-color-text-and-icon-neutral);
+}
+&:visited {
+          color: var(--kds-color-text-and-icon-info);
+}
+&:hover {
+          background-color: var(--kds-color-background-neutral-hover);
+}
+&:active {
+          background-color: var(--kds-color-background-neutral-active);
+}
+}
+}
+ol,
+    ul {
+      padding-left: var(--kds-spacing-container-2x);
+}
+dd {
+      margin-left: var(--kds-spacing-container-1x);
+}
+table {
+& {
+      border-spacing: var(--kds-spacing-container-0-25x) 0;
+      border-collapse: separate;
+}
+td,
+      th {
+        padding: var(--kds-spacing-container-0-25x);
+}
+th {
+        font: var(--kds-font-base-body-small-strong);
+        text-align: left;
+        border-bottom: var(--kds-border-width-icon-stroke-l) solid
+          var(--kds-color-border-neutral);
+}
+td {
+        font: var(--kds-font-base-body-small);
+        border-bottom: var(--kds-border-width-icon-stroke-s) solid
+          var(--kds-color-border-neutral);
+}
+}
+}
+}
+
+.single-option-wrapper[data-v-bed81439] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--kds-spacing-container-1x);
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+.option-content {
+& .name[data-v-bed81439] {
+    font: var(--kds-font-base-title-small-strong);
+}
+}
+
+.wrapper[data-v-4920a7fa] {
+  display: grid;
+  grid-template-columns: var(--kds-spacing-container-0-5x) 1fr;
+  gap: var(--kds-spacing-container-0-5x);
+}
+.icon[data-v-4920a7fa] {
+  display: flex;
+  align-items: center;
+}
+.name[data-v-4920a7fa],
+.description[data-v-4920a7fa] {
+  grid-column: 2;
+}
+.title[data-v-4920a7fa] {
+  font: var(--kds-font-base-title-small-strong);
+}
+
+.port-group-card {
+&[data-v-ed993ae3] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-75x);
+  padding: var(--kds-spacing-container-1x);
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+& .group-name[data-v-ed993ae3] {
+    font: var(--kds-font-base-title-small-strong);
+}
+}
+
+.port-list[data-v-bf308a64] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kds-spacing-container-0-5x);
+}
+
+.single-option-wrapper[data-v-2dc072ee] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--kds-spacing-container-1x);
+  background: var(--kds-color-surface-muted);
+  border-radius: var(--kds-border-radius-container-0-37x);
+}
+
+.content[data-v-c47dbfbd] {
+  padding: var(--kds-spacing-container-0-5x) 0;
+}