@knime/kds-components 0.23.2 → 0.24.0

package/dist/index.css

@@ -531,6 +531,12 @@ to {
 }
 }
 
+.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);
 }
@@ -883,44 +889,8 @@ html.kds-legacy {
   opacity: 1;
 }
 
-.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-item {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -937,36 +907,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     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-3bdbc9c1] {
+.accessory[data-v-def6165b] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-3bdbc9c1] {
+.accessory[data-v-def6165b] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-3bdbc9c1] {
+.large &[data-v-def6165b] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -974,19 +944,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-3bdbc9c1] {
+.prefix[data-v-def6165b] {
         flex-shrink: 0;
 }
-.special[data-v-3bdbc9c1] {
+.special[data-v-def6165b] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-3bdbc9c1] {
+.subtext[data-v-def6165b] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -997,7 +967,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -1005,83 +975,74 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-3bdbc9c1] {
+.shortcut[data-v-def6165b] {
       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-3bdbc9c1] {
+.trailing-item-reserve-space[data-v-def6165b] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-3bdbc9c1]:hover:not(.disabled),
-  &.active[data-v-3bdbc9c1]:not(.disabled) {
+&[data-v-def6165b]:hover:not(.disabled),
+  &.active[data-v-def6165b]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-3bdbc9c1]:active:not(.disabled) {
+&[data-v-def6165b]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-3bdbc9c1] {
+.subtext[data-v-def6165b] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-3bdbc9c1]:hover,
-    &.active[data-v-3bdbc9c1] {
+&[data-v-def6165b]:hover,
+    &.active[data-v-def6165b] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-3bdbc9c1]:active {
+&[data-v-def6165b]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-3bdbc9c1] {
+&.disabled[data-v-def6165b] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-3bdbc9c1] {
+.subtext[data-v-def6165b] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-3bdbc9c1]:hover,
-    &.active[data-v-3bdbc9c1] {
+&[data-v-def6165b]:hover,
+    &.active[data-v-def6165b] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-3bdbc9c1]:active {
+&[data-v-def6165b]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-3bdbc9c1] {
+&.disabled[data-v-def6165b] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-3bdbc9c1] {
+&[data-v-def6165b] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-3bdbc9c1],
-    .subtext[data-v-3bdbc9c1] {
+.shortcut[data-v-def6165b],
+    .subtext[data-v-def6165b] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 
-.kds-list-item-divider[data-v-7f982d9e] {
-  flex-shrink: 0;
-  width: 100%;
-  padding: 0;
-  margin: 0 0 var(--kds-spacing-container-0-12x);
-  border: none;
-  border-bottom: var(--kds-border-base-subtle);
-}
-
 .kds-list-item-section-title {
 &[data-v-5eeb1226] {
   display: flex;
@@ -1108,46 +1069,27 @@ html.kds-legacy {
 }
 }
 
-.kds-list-container {
-&[data-v-9359aaf4] {
-  position: relative;
+.kds-menu-container {
+&[data-v-68200614] {
   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);
 }
-&.standalone[data-v-9359aaf4] {
-    border: var(--kds-border-base-subtle);
-    border-radius: var(--kds-border-radius-container-0-31x);
-}
-&.menu[data-v-9359aaf4] {
-    border: none;
-}
-&[data-v-9359aaf4]:focus-visible {
+&[data-v-68200614]: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-9359aaf4] {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
 }
-
-.kds-menu-container[data-v-7a0323dd] {
-  min-width: var(--kds-dimension-component-width-12x);
-  max-width: var(--kds-dimension-component-width-20x);
-  background-color: var(--kds-color-surface-default);
-  border-radius: var(--kds-border-radius-container-0-50x);
-  box-shadow: var(--kds-elevation-level-3);
 }
 
 .kds-popover {
-&[data-v-83c11cee] {
+&[data-v-1e5f9d24] {
   padding: 0;
   margin: 0;
   overflow: visible;
@@ -1167,11 +1109,18 @@ html.kds-legacy {
   /* 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-83c11cee] {
+&.full-width[data-v-1e5f9d24] {
     min-inline-size: anchor-size(width);
 }
-&.floating.top-right[data-v-83c11cee] {
+&.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);
@@ -1179,7 +1128,7 @@ html.kds-legacy {
       --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-83c11cee] {
+&.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;
@@ -1187,7 +1136,7 @@ html.kds-legacy {
       --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-83c11cee] {
+&.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);
@@ -1195,7 +1144,7 @@ html.kds-legacy {
       --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-83c11cee] {
+&.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;
@@ -1203,6 +1152,11 @@ html.kds-legacy {
       --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 */
@@ -1232,7 +1186,7 @@ html.kds-legacy {
   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-83c11cee] {
+.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);
@@ -1263,17 +1217,92 @@ html.kds-legacy {
   flex-shrink: 0;
 }
 
-.kds-label-wrapper[data-v-13bea091] {
+.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-5e1d539e] {
+  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-5e1d539e] {
+    border: var(--kds-border-base-subtle);
+    border-radius: var(--kds-border-radius-container-0-31x);
+}
+&.menu[data-v-5e1d539e] {
+    border: none;
+}
+&[data-v-5e1d539e]: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-5e1d539e] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.kds-list-item-divider[data-v-5e1d539e] {
+  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-13bea091] {
+.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;
@@ -1667,7 +1696,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-92291903] {
+&[data-v-69242818] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1679,46 +1708,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-92291903]:has(input:focus:not(:disabled)) {
+&[data-v-69242818]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-92291903]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-69242818]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-92291903] {
+&.error[data-v-69242818] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-92291903] {
+&.disabled[data-v-69242818] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-92291903] {
+&[data-v-69242818] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-92291903] {
+&.leading[data-v-69242818] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-92291903] {
+&.trailing[data-v-69242818] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-92291903] {
+.container.disabled &[data-v-69242818] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-92291903],
-  .container:has(.input-field.has-value) &[data-v-92291903] {
+.container:focus-within &[data-v-69242818],
+  .container:has(.input-field.has-value) &[data-v-69242818] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-92291903] {
+&[data-v-69242818] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1737,33 +1766,36 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-92291903] {
+&[data-v-69242818] {
     appearance: textfield;
 }
-&[data-v-92291903]::-webkit-outer-spin-button,
-    &[data-v-92291903]::-webkit-inner-spin-button {
+&[data-v-69242818]::-webkit-outer-spin-button,
+    &[data-v-69242818]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-92291903]::-webkit-search-cancel-button {
+&[type="search"][data-v-69242818]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-92291903]::placeholder {
+&[data-v-69242818]::placeholder {
+    color: var(--kds-color-text-and-icon-subtle);
+}
+&.empty-mask[data-v-69242818] {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-92291903] {
+&[data-v-69242818] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-92291903]::placeholder {
+&[data-v-69242818]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-92291903] {
+&[data-v-69242818] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1773,26 +1805,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-92291903] {
+&.placeholder[data-v-69242818] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-92291903] {
+&.disabled[data-v-69242818] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-92291903] {
+.container:focus-within &[data-v-69242818] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-92291903] {
+.clear-button[data-v-69242818] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-92291903] {
+.leading-slot[data-v-69242818] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-92291903] {
+.trailing-slot[data-v-69242818] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -1909,1435 +1941,237 @@ html.kds-legacy {
 }
 }
 
-.vc-popover-content-wrapper {
-  --popover-horizontal-content-offset: 8px;
-  --popover-vertical-content-offset: 10px;
-  --popover-caret-horizontal-offset: 18px;
-  --popover-caret-vertical-offset: 8px;
-
-  position: absolute;
-  display: block;
-  outline: none;
-  z-index: 10;
-}
-.vc-popover-content-wrapper:not(.is-interactive) {
-    pointer-events: none;
-}
-.vc-popover-content {
-  position: relative;
-  color: var(--vc-popover-content-color);
-  font-weight: var(--vc-font-medium);
-  background-color: var(--vc-popover-content-bg);
-  border: 1px solid;
-  border-color: var(--vc-popover-content-border);
-  border-radius: var(--vc-rounded-lg);
-  padding: 4px;
-  outline: none;
-  z-index: 10;
-  box-shadow: var(--vc-shadow-lg);
-}
-.vc-popover-content.direction-bottom {
-    margin-top: var(--popover-vertical-content-offset);
-}
-.vc-popover-content.direction-top {
-    margin-bottom: var(--popover-vertical-content-offset);
-}
-.vc-popover-content.direction-left {
-    margin-right: var(--popover-horizontal-content-offset);
-}
-.vc-popover-content.direction-right {
-    margin-left: var(--popover-horizontal-content-offset);
-}
-.vc-popover-caret {
-  content: '';
-  position: absolute;
-  display: block;
-  width: 12px;
-  height: 12px;
-  border-top: inherit;
-  border-left: inherit;
-  background-color: inherit;
-  z-index: -1;
-}
-.vc-popover-caret.direction-bottom {
-    top: 0;
+.kds-date-picker-grid[data-v-51807b35] {
+  width: 100%;
 }
-.vc-popover-caret.direction-bottom.align-left {
-      -webkit-transform: translateY(-50%) rotate(45deg);
-              transform: translateY(-50%) rotate(45deg);
+.kds-date-picker-header-row[data-v-51807b35] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
 }
-.vc-popover-caret.direction-bottom.align-center {
-      -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-              transform: translateX(-50%) translateY(-50%) rotate(45deg);
+.kds-date-picker-day-grid[data-v-51807b35] {
+  display: grid;
+  row-gap: var(--kds-spacing-container-0-5x);
 }
-.vc-popover-caret.direction-bottom.align-right {
-      -webkit-transform: translateY(-50%) rotate(45deg);
-              transform: translateY(-50%) rotate(45deg);
+.kds-date-picker-row[data-v-51807b35] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-items: center;
 }
-.vc-popover-caret.direction-top {
-    top: 100%;
+.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);
 }
-.vc-popover-caret.direction-top.align-left {
-      -webkit-transform: translateY(-50%) rotate(-135deg);
-              transform: translateY(-50%) rotate(-135deg);
+.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);
 }
-.vc-popover-caret.direction-top.align-center {
-      -webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg);
-              transform: translateX(-50%) translateY(-50%) rotate(-135deg);
+&[data-v-51807b35]:hover:not(:disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
 }
-.vc-popover-caret.direction-top.align-right {
-      -webkit-transform: translateY(-50%) rotate(-135deg);
-              transform: translateY(-50%) rotate(-135deg);
+&[data-v-51807b35]:active:not(:disabled) {
+    background-color: var(--kds-color-background-neutral-active);
 }
-.vc-popover-caret.direction-left {
-    left: 100%;
 }
-.vc-popover-caret.direction-left.align-top {
-      -webkit-transform: translateX(-50%) rotate(135deg);
-              transform: translateX(-50%) rotate(135deg);
+.kds-date-picker-day-offset[data-v-51807b35] {
+  color: var(--kds-color-text-and-icon-subtle);
 }
-.vc-popover-caret.direction-left.align-middle {
-      -webkit-transform: translateY(-50%) translateX(-50%) rotate(135deg);
-              transform: translateY(-50%) translateX(-50%) rotate(135deg);
+.kds-date-picker-day-disabled[data-v-51807b35] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
 }
-.vc-popover-caret.direction-left.align-bottom {
-      -webkit-transform: translateX(-50%) rotate(135deg);
-              transform: translateX(-50%) rotate(135deg);
+.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);
 }
-.vc-popover-caret.direction-right {
-    left: 0;
+&[data-v-51807b35]:active:not(:disabled) {
+    background-color: var(--kds-color-background-selected-active);
 }
-.vc-popover-caret.direction-right.align-top {
-      -webkit-transform: translateX(-50%) rotate(-45deg);
-              transform: translateX(-50%) rotate(-45deg);
 }
-.vc-popover-caret.direction-right.align-middle {
-      -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
-              transform: translateY(-50%) translateX(-50%) rotate(-45deg);
+
+.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%;
 }
-.vc-popover-caret.direction-right.align-bottom {
-      -webkit-transform: translateX(-50%) rotate(-45deg);
-              transform: translateX(-50%) rotate(-45deg);
+.kds-date-picker-grid-row[data-v-63d96e84] {
+  display: contents;
 }
-.vc-popover-caret.align-left {
-    left: var(--popover-caret-horizontal-offset);
+.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);
 }
-.vc-popover-caret.align-center {
-    left: 50%;
+&[data-v-63d96e84]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
 }
-.vc-popover-caret.align-right {
-    right: var(--popover-caret-horizontal-offset);
+&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-active);
 }
-.vc-popover-caret.align-top {
-    top: var(--popover-caret-vertical-offset);
 }
-.vc-popover-caret.align-middle {
-    top: 50%;
+.kds-date-picker-cell-disabled[data-v-63d96e84] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
 }
-.vc-popover-caret.align-bottom {
-    bottom: var(--popover-caret-vertical-offset);
+.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);
 }
-
-.vc-day-popover-row {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  transition: var(--vc-day-content-transition);
-}
-.vc-day-popover-row-indicator {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-flex-grow: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  width: 15px;
-}
-.vc-day-popover-row-indicator span {
-    transition: var(--vc-day-content-transition);
-}
-.vc-day-popover-row-label {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-flex-wrap: none;
-      -ms-flex-wrap: none;
-          flex-wrap: none;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  width: -webkit-max-content;
-  width: max-content;
-  margin-left: 4px;
-  margin-right: 4px;
-  font-size: var(--vc-text-xs);
-  line-height: var(--vc-leading-normal);
-}
-.vc-day-popover-row-highlight {
-  width: 8px;
-  height: 5px;
-  border-radius: 3px;
-}
-.vc-day-popover-row-dot {
-}
-.vc-day-popover-row-bar {
-  width: 10px;
-  height: 3px;
+&[data-v-63d96e84]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-active);
 }
-
-.vc-base-icon {
-  display: inline-block;
-  stroke: currentColor;
-  stroke-width: 2;
-  fill: none;
 }
 
-.vc-header {
+.kds-date-picker-grid-simple[data-v-270d55b9] {
   display: grid;
-  grid-gap: 4px;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  height: 30px;
-  margin-top: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-.vc-header.is-lg {
-    font-size: var(--vc-text-lg);
-}
-.vc-header.is-xl {
-    font-size: var(--vc-text-xl);
-}
-.vc-header.is-2xl {
-    font-size: var(--vc-text-2xl);
-}
-.vc-header .vc-title-wrapper {
-    grid-row: 1;
-    grid-column: title;
-}
-.vc-header .vc-prev {
-    grid-row: 1;
-    grid-column: prev;
-}
-.vc-header .vc-next {
-    grid-row: 1;
-    grid-column: next;
-}
-.vc-header .vc-title,
-  .vc-header .vc-prev,
-  .vc-header .vc-next {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center;
-    border: 0;
-    border-radius: var(--vc-rounded);
-    pointer-events: auto;
-    -webkit-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    cursor: pointer;
-}
-.vc-header .vc-title {
-    color: var(--vc-header-title-color);
-    font-weight: var(--vc-font-semibold);
-    white-space: nowrap;
-    padding: 0 8px;
-    margin: 0;
-    line-height: 30px;
-}
-.vc-header .vc-title:hover {
-      opacity: 0.75;
-}
-.vc-header .vc-arrow {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center;
-    color: var(--vc-header-arrow-color);
-    width: 28px;
-    height: 30px;
-    margin: 0;
-    padding: 0;
-}
-.vc-header .vc-arrow:hover {
-      background: var(--vc-header-arrow-hover-bg);
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--kds-spacing-container-0-5x);
+  width: 100%;
+  height: 100%;
 }
-.vc-header .vc-arrow:disabled {
-      opacity: 0.25;
-      pointer-events: none;
+.kds-date-picker-grid-row[data-v-270d55b9] {
+  display: contents;
 }
-
-.vc-nav-header {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-.vc-nav-title,
-.vc-nav-arrow,
-.vc-nav-item {
-  font-size: var(--vc-text-sm);
-  margin: 0;
+.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;
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  border: 0;
-  border-radius: var(--vc-rounded);
-  white-space: nowrap;
-}
-.vc-nav-title:hover, .vc-nav-arrow:hover, .vc-nav-item:hover {
-    background-color: var(--vc-nav-hover-bg);
-}
-.vc-nav-title:disabled, .vc-nav-arrow:disabled, .vc-nav-item:disabled {
-    opacity: 0.25;
-    pointer-events: none;
+  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);
 }
-.vc-nav-title {
-  color: var(--vc-nav-title-color);
-  font-weight: var(--vc-font-bold);
-  line-height: var(--vc-leading-snug);
-  height: 30px;
-  padding: 0 6px;
+&[data-v-270d55b9]:hover:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-hover);
 }
-.vc-nav-arrow {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  color: var(--vc-header-arrow-color);
-  width: 26px;
-  height: 30px;
-  padding: 0;
+&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-neutral-active);
 }
-.vc-nav-items {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-row-gap: 2px;
-  grid-column-gap: 5px;
-  margin-top: 2px;
 }
-.vc-nav-item {
-  width: 48px;
-  text-align: center;
-  font-weight: var(--vc-font-semibold);
-  line-height: var(--vc-leading-snug);
-  padding: 6px 0;
+.kds-date-picker-cell-disabled[data-v-270d55b9] {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
 }
-.vc-nav-item.is-active {
-    color: var(--vc-nav-item-active-color);
-    background-color: var(--vc-nav-item-active-bg);
-    font-weight: var(--vc-font-bold);
+.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);
 }
-.vc-nav-item.is-active:not(:focus) {
-      box-shadow: var(--vc-nav-item-active-box-shadow);
+&[data-v-270d55b9]:active:not(.kds-date-picker-cell-disabled) {
+    background-color: var(--kds-color-background-selected-active);
 }
-.vc-nav-item.is-current {
-    color: var(--vc-nav-item-current-color);
 }
 
-.vc-day {
-  position: relative;
-  min-height: 32px;
-  z-index: 1;
-  /* &.is-not-in-month * {
-    opacity: 0;
-    pointer-events: none;
-  } */
-}
-.vc-monthly .is-not-in-month * {
-  opacity: 0;
-  pointer-events: none;
-}
-.vc-day-layer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-.vc-day-box-center-center {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-}
-.vc-day-box-left-center {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: flex-start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-transform-origin: 0% 50%;
-          transform-origin: 0% 50%;
-}
-.vc-day-box-right-center {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-transform-origin: 100% 50%;
-          transform-origin: 100% 50%;
-}
-.vc-day-box-center-bottom {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: flex-end;
-      -ms-flex-align: end;
-          align-items: flex-end;
-}
-.vc-day-content {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  font-size: var(--vc-text-sm);
-  font-weight: var(--vc-font-medium);
-  width: 28px;
-  height: 28px;
-  line-height: 28px;
-  border-radius: var(--vc-rounded-full);
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  cursor: pointer;
-}
-.vc-day-content:hover {
-    background-color: var(--vc-day-content-hover-bg);
-}
-.vc-day-content.vc-disabled {
-    color: var(--vc-day-content-disabled-color);
-}
-
-/* ----Content---- */
-.vc-content:not(.vc-base) {
-  font-weight: var(--vc-font-bold);
-  color: var(--vc-content-color);
-}
-
-/* ----Highlights---- */
-.vc-highlights {
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -1;
-}
-.vc-highlight {
-  width: 28px;
-  height: 28px;
-}
-.vc-highlight.vc-highlight-base-start {
-    width: 50% !important;
-    border-radius: 0 !important;
-    border-right-width: 0 !important;
-}
-.vc-highlight.vc-highlight-base-end {
-    width: 50% !important;
-    border-radius: 0 !important;
-    border-left-width: 0 !important;
-}
-.vc-highlight.vc-highlight-base-middle {
-    width: 100%;
-    border-radius: 0 !important;
-    border-left-width: 0 !important;
-    border-right-width: 0 !important;
-    margin: 0 -1px;
-}
-.vc-highlight-bg-outline,
-.vc-highlight-bg-none {
-  background-color: var(--vc-highlight-outline-bg);
-  border: 2px solid;
-  border-color: var(--vc-highlight-outline-border);
-  border-radius: var(--vc-rounded-full);
-}
-.vc-highlight-bg-light {
-  background-color: var(--vc-highlight-light-bg);
-  border-radius: var(--vc-rounded-full);
-}
-.vc-highlight-bg-solid {
-  background-color: var(--vc-highlight-solid-bg);
-  border-radius: var(--vc-rounded-full);
-}
-.vc-highlight-content-outline,
-.vc-highlight-content-none {
-  font-weight: var(--vc-font-bold);
-  color: var(--vc-highlight-outline-content-color);
-}
-.vc-highlight-content-light {
-  font-weight: var(--vc-font-bold);
-  color: var(--vc-highlight-light-content-color);
-}
-.vc-highlight-content-solid {
-  font-weight: var(--vc-font-bold);
-  color: var(--vc-highlight-solid-content-color);
-}
-
-/* ----Dots---- */
-.vc-dots {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.vc-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 9999px;
-  transition: var(--vc-day-content-transition);
-}
-.vc-dot:not(:last-child) {
-    margin-right: 3px;
-}
-
-/* ----Bars---- */
-.vc-bars {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-justify-content: flex-start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 75%;
-}
-.vc-bar {
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  height: 3px;
-  transition: var(--vc-day-content-transition);
-}
-.vc-dot {
-  background-color: var(--vc-dot-bg);
-}
-.vc-bar {
-  background-color: var(--vc-bar-bg);
-}
-
-.vc-pane {
-  min-width: 250px;
+.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);
 }
-.vc-weeknumber {
-  display: -webkit-flex;
-  display: -ms-flexbox;
+.kds-date-picker-header[data-v-e46d7e18] {
   display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  position: absolute;
-}
-.vc-weeknumber.is-left {
-    left: calc(var(--vc-weeknumber-offset-inside) * -1);
-}
-.vc-weeknumber.is-right {
-    right: calc(var(--vc-weeknumber-offset-inside) * -1);
-}
-.vc-weeknumber.is-left-outside {
-    left: calc(var(--vc-weeknumber-offset-outside) * -1);
-}
-.vc-weeknumber.is-right-outside {
-    right: calc(var(--vc-weeknumber-offset-outside) * -1);
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kds-spacing-container-0-75x);
 }
-.vc-weeknumber-content {
-  display: -webkit-flex;
-  display: -ms-flexbox;
+.kds-date-picker-nav-block[data-v-e46d7e18] {
   display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  font-size: var(--vc-text-xs);
-  font-weight: var(--vc-font-medium);
-  font-style: italic;
-  width: 28px;
-  height: 28px;
-  margin-top: 2px;
-  color: var(--vc-weeknumber-color);
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.vc-weeks {
-  position: relative;
-  /* overflow: auto; */
-  -webkit-overflow-scrolling: touch;
-  padding: 6px;
-  min-width: 232px;
-}
-.vc-weeks.vc-show-weeknumbers-left {
-    margin-left: var(--vc-weeknumber-offset-inside);
-}
-.vc-weeks.vc-show-weeknumbers-right {
-    margin-right: var(--vc-weeknumber-offset-inside);
-}
-.vc-weekday {
-  text-align: center;
-  color: var(--vc-weekday-color);
-  font-size: var(--vc-text-sm);
-  font-weight: var(--vc-font-bold);
-  line-height: 14px;
-  padding-top: 4px;
-  padding-bottom: 8px;
-  cursor: default;
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.vc-week,
-.vc-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  position: relative;
-}
-
-.vc-pane-container {
-  width: 100%;
-  position: relative;
-}
-.vc-pane-container.in-transition {
-    overflow: hidden;
-}
-.vc-pane-layout {
-  display: grid;
-}
-.vc-pane-header-wrapper {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  pointer-events: none;
+  flex-shrink: 0;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
 }
-.vc-day-popover-container {
-  font-size: var(--vc-text-xs);
-  font-weight: var(--vc-font-medium);
+.kds-date-picker-header-label[data-v-e46d7e18] {
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
 }
-.vc-day-popover-header {
-  font-size: var(--vc-text-xs);
-  color: var(--vc-day-popover-header-color);
-  font-weight: var(--vc-font-semibold);
+.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;
 }
-
-.vc-base-select {
-  position: relative;
-  display: -webkit-flex;
-  display: -ms-flexbox;
+.kds-date-picker-body[data-v-e46d7e18] {
   display: flex;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  height: 30px;
-  font-size: var(--vc-text-base);
-  font-weight: var(--vc-font-medium);
-}
-.vc-base-select.vc-has-icon select {
-      padding: 0 27px 0 9px;
-}
-.vc-base-select.vc-has-icon .vc-base-sizer {
-      padding: 0 28px 0 10px;
-}
-.vc-base-select.vc-fit-content select {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-}
-.vc-base-select .vc-base-icon {
-    position: absolute;
-    top: 6px;
-    right: 4px;
-    opacity: 0.6;
-    pointer-events: none;
-}
-.vc-base-select .vc-base-sizer {
-    font-size: var(--vc-text-base);
-    font-weight: var(--vc-font-medium);
-    color: transparent;
-    padding: 0px 8px;
-    margin: 0;
-}
-.vc-base-select select {
-    display: -webkit-inline-flex;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    color: var(--vc-select-color);
-    display: block;
-    -webkit-appearance: none;
-            appearance: none;
-    background-color: var(--vc-select-bg);
-    border-radius: var(--vc-rounded);
-    height: 30px;
-    width: -webkit-max-content;
-    width: max-content;
-    padding: 0px 7px;
-    margin: 0;
-    line-height: var(--leading-none);
-    text-indent: 0px;
-    background-image: none;
-    cursor: pointer;
-    text-align: center;
-}
-.vc-base-select select:hover {
-      background-color: var(--vc-select-hover-bg);
-}
-.vc-base-select select.vc-align-left {
-      text-align: left;
-}
-.vc-base-select select.vc-align-right {
-      text-align: right;
-}
-
-.vc-time-picker {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 8px 4px;
-}
-.vc-time-picker.vc-invalid {
-    pointer-events: none;
-    opacity: 0.5;
-}
-.vc-time-picker.vc-attached {
-    border-top: 1px solid var(--vc-time-picker-border);
-}
-.vc-time-picker > * + * {
-    margin-top: 4px;
-}
-.vc-time-header {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  font-size: var(--vc-text-sm);
-  font-weight: var(--vc-font-semibold);
-  text-transform: uppercase;
-  margin-top: -4px;
-  padding-left: 4px;
-  padding-right: 4px;
-  line-height: 21px;
-}
-.vc-time-select-group {
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 0 4px;
-  background: var(--vc-time-select-group-bg);
-  border-radius: var(--vc-rounded-md);
-  border: 1px solid var(--vc-time-select-group-border);
-}
-.vc-time-select-group .vc-base-icon {
-    margin-right: 4px;
-    color: var(--vc-time-select-group-icon-color);
-}
-.vc-time-select-group select {
-    background: transparent;
-    padding: 0px 4px;
-}
-.vc-time-weekday {
-  color: var(--vc-time-weekday-color);
-  letter-spacing: var(--tracking-wide);
-}
-.vc-time-month {
-  color: var(--vc-time-month-color);
-  margin-left: 8px;
-}
-.vc-time-day {
-  color: var(--vc-time-day-color);
-  margin-left: 4px;
-}
-.vc-time-year {
-  color: var(--vc-time-year-color);
-  margin-left: 8px;
-}
-.vc-time-colon {
-  margin: 0 1px 2px 2px;
-}
-.vc-time-decimal {
-  margin: 0 0 0 1px;
-}
-.vc-none-enter-active,
-.vc-none-leave-active {
-  transition-duration: 0s;
-}
-
-.vc-fade-enter-active,
-.vc-fade-leave-active,
-.vc-slide-left-enter-active,
-.vc-slide-left-leave-active,
-.vc-slide-right-enter-active,
-.vc-slide-right-leave-active,
-.vc-slide-up-enter-active,
-.vc-slide-up-leave-active,
-.vc-slide-down-enter-active,
-.vc-slide-down-leave-active,
-.vc-slide-fade-enter-active,
-.vc-slide-fade-leave-active {
-  transition: opacity var(--vc-slide-duration) var(--vc-slide-timing),
-    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-  transition: transform var(--vc-slide-duration) var(--vc-slide-timing),
-    opacity var(--vc-slide-duration) var(--vc-slide-timing);
-  transition: transform var(--vc-slide-duration) var(--vc-slide-timing),
-    opacity var(--vc-slide-duration) var(--vc-slide-timing),
-    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-  pointer-events: none;
-}
-
-.vc-none-leave-active,
-.vc-fade-leave-active,
-.vc-slide-left-leave-active,
-.vc-slide-right-leave-active,
-.vc-slide-up-leave-active,
-.vc-slide-down-leave-active {
-  position: absolute !important;
-  width: 100%;
-}
-
-.vc-none-enter-from,
-.vc-none-leave-to,
-.vc-fade-enter-from,
-.vc-fade-leave-to,
-.vc-slide-left-enter-from,
-.vc-slide-left-leave-to,
-.vc-slide-right-enter-from,
-.vc-slide-right-leave-to,
-.vc-slide-up-enter-from,
-.vc-slide-up-leave-to,
-.vc-slide-down-enter-from,
-.vc-slide-down-leave-to,
-.vc-slide-fade-enter-from,
-.vc-slide-fade-leave-to {
-  opacity: 0;
-}
-
-.vc-slide-left-enter-from,
-.vc-slide-right-leave-to,
-.vc-slide-fade-enter-from.direction-left,
-.vc-slide-fade-leave-to.direction-left {
-  -webkit-transform: translateX(var(--vc-slide-translate));
-          transform: translateX(var(--vc-slide-translate));
-}
-
-.vc-slide-right-enter-from,
-.vc-slide-left-leave-to,
-.vc-slide-fade-enter-from.direction-right,
-.vc-slide-fade-leave-to.direction-right {
-  -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-          transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-
-.vc-slide-up-enter-from,
-.vc-slide-down-leave-to,
-.vc-slide-fade-enter-from.direction-top,
-.vc-slide-fade-leave-to.direction-top {
-  -webkit-transform: translateY(var(--vc-slide-translate));
-          transform: translateY(var(--vc-slide-translate));
-}
-
-.vc-slide-down-enter-from,
-.vc-slide-up-leave-to,
-.vc-slide-fade-enter-from.direction-bottom,
-.vc-slide-fade-leave-to.direction-bottom {
-  -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-          transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-
-:root {
-  --vc-white: #ffffff;
-  --vc-black: #000000;
-
-  --vc-gray-50: #f8fafc;
-  --vc-gray-100: #f1f5f9;
-  --vc-gray-200: #e2e8f0;
-  --vc-gray-300: #cbd5e1;
-  --vc-gray-400: #94a3b8;
-  --vc-gray-500: #64748b;
-  --vc-gray-600: #475569;
-  --vc-gray-700: #334155;
-  --vc-gray-800: #1e293b;
-  --vc-gray-900: #0f172a;
-
-  --vc-font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    'Helvetica', 'Arial', sans-serif;
-
-  --vc-font-normal: 400;
-  --vc-font-medium: 500;
-  --vc-font-semibold: 600;
-  --vc-font-bold: 700;
-
-  --vc-text-2xs: 10px;
-  --vc-text-xs: 12px;
-  --vc-text-sm: 14px;
-  --vc-text-base: 16px;
-  --vc-text-lg: 18px;
-  --vc-text-xl: 20px;
-  --vc-text-2xl: 24px;
-
-  --vc-leading-none: 1;
-  --vc-leading-tight: 1.25;
-  --vc-leading-snug: 1.375;
-  --vc-leading-normal: 1.5;
-
-  --vc-rounded: 0.25rem;
-  --vc-rounded-md: 0.375rem;
-  --vc-rounded-lg: 0.5rem;
-  --vc-rounded-full: 9999px;
-
-  --vc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --vc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --vc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-
-  --vc-slide-translate: 22px;
-  --vc-slide-duration: 0.15s;
-  --vc-slide-timing: ease;
-
-  --vc-day-content-transition: all 0.13s ease-in;
-  --vc-weeknumber-offset-inside: 26px;
-  --vc-weeknumber-offset-outside: 34px;
-}
-
-.vc-gray {
-  --vc-accent-50: var(--vc-gray-50);
-  --vc-accent-100: var(--vc-gray-100);
-  --vc-accent-200: var(--vc-gray-200);
-  --vc-accent-300: var(--vc-gray-300);
-  --vc-accent-400: var(--vc-gray-400);
-  --vc-accent-500: var(--vc-gray-500);
-  --vc-accent-600: var(--vc-gray-600);
-  --vc-accent-700: var(--vc-gray-700);
-  --vc-accent-800: var(--vc-gray-800);
-  --vc-accent-900: var(--vc-gray-900);
-}
-
-.vc-red {
-  --vc-accent-50: #fef2f2;
-  --vc-accent-100: #fee2e2;
-  --vc-accent-200: #fecaca;
-  --vc-accent-300: #fca5a5;
-  --vc-accent-400: #f87171;
-  --vc-accent-500: #ef4444;
-  --vc-accent-600: #dc2626;
-  --vc-accent-700: #b91c1c;
-  --vc-accent-800: #991b1b;
-  --vc-accent-900: #7f1d1d;
-}
-
-.vc-orange {
-  --vc-accent-50: #fff7ed;
-  --vc-accent-100: #ffedd5;
-  --vc-accent-200: #fed7aa;
-  --vc-accent-300: #fdba74;
-  --vc-accent-400: #fb923c;
-  --vc-accent-500: #f97316;
-  --vc-accent-600: #ea580c;
-  --vc-accent-700: #c2410c;
-  --vc-accent-800: #9a3412;
-  --vc-accent-900: #7c2d12;
-}
-
-.vc-yellow {
-  --vc-accent-50: #fefce8;
-  --vc-accent-100: #fef9c3;
-  --vc-accent-200: #fef08a;
-  --vc-accent-300: #fde047;
-  --vc-accent-400: #facc15;
-  --vc-accent-500: #eab308;
-  --vc-accent-600: #ca8a04;
-  --vc-accent-700: #a16207;
-  --vc-accent-800: #854d0e;
-  --vc-accent-900: #713f12;
-}
-
-.vc-green {
-  --vc-accent-50: #f0fdf4;
-  --vc-accent-100: #dcfce7;
-  --vc-accent-200: #bbf7d0;
-  --vc-accent-300: #86efac;
-  --vc-accent-400: #4ade80;
-  --vc-accent-500: #22c55e;
-  --vc-accent-600: #16a34a;
-  --vc-accent-700: #15803d;
-  --vc-accent-800: #166534;
-  --vc-accent-900: #14532d;
-}
-
-.vc-teal {
-  --vc-accent-50: #f0fdfa;
-  --vc-accent-100: #ccfbf1;
-  --vc-accent-200: #99f6e4;
-  --vc-accent-300: #5eead4;
-  --vc-accent-400: #2dd4bf;
-  --vc-accent-500: #14b8a6;
-  --vc-accent-600: #0d9488;
-  --vc-accent-700: #0f766e;
-  --vc-accent-800: #115e59;
-  --vc-accent-900: #134e4a;
-}
-
-.vc-blue {
-  --vc-accent-50: #eff6ff;
-  --vc-accent-100: #dbeafe;
-  --vc-accent-200: #bfdbfe;
-  --vc-accent-300: #93c5fd;
-  --vc-accent-400: #60a5fa;
-  --vc-accent-500: #3b82f6;
-  --vc-accent-600: #2563eb;
-  --vc-accent-700: #1d4ed8;
-  --vc-accent-800: #1e40af;
-  --vc-accent-900: #1e3a8a;
-}
-
-.vc-indigo {
-  --vc-accent-50: #eef2ff;
-  --vc-accent-100: #e0e7ff;
-  --vc-accent-200: #c7d2fe;
-  --vc-accent-300: #a5b4fc;
-  --vc-accent-400: #818cf8;
-  --vc-accent-500: #6366f1;
-  --vc-accent-600: #4f46e5;
-  --vc-accent-700: #4338ca;
-  --vc-accent-800: #3730a3;
-  --vc-accent-900: #312e81;
-}
-
-.vc-purple {
-  --vc-accent-50: #faf5ff;
-  --vc-accent-100: #f3e8ff;
-  --vc-accent-200: #e9d5ff;
-  --vc-accent-300: #d8b4fe;
-  --vc-accent-400: #c084fc;
-  --vc-accent-500: #a855f7;
-  --vc-accent-600: #9333ea;
-  --vc-accent-700: #7e22ce;
-  --vc-accent-800: #6b21a8;
-  --vc-accent-900: #581c87;
-}
-
-.vc-pink {
-  --vc-accent-50: #fdf2f8;
-  --vc-accent-100: #fce7f3;
-  --vc-accent-200: #fbcfe8;
-  --vc-accent-300: #f9a8d4;
-  --vc-accent-400: #f472b6;
-  --vc-accent-500: #ec4899;
-  --vc-accent-600: #db2777;
-  --vc-accent-700: #be185d;
-  --vc-accent-800: #9d174d;
-  --vc-accent-900: #831843;
-}
-
-.vc-focus:focus-within {
-    outline: 0;
-    box-shadow: var(--vc-focus-ring);
-  }
-
-.vc-light {
-  /* Base */
-  --vc-color: var(--vc-gray-900);
-  --vc-bg: var(--vc-white);
-  --vc-border: var(--vc-gray-300);
-  --vc-hover-bg: hsla(211, 25%, 84%, 0.3);
-  --vc-focus-ring: 0 0 0 2px rgb(59, 131, 246, 0.4);
-  /* Calendar header */
-  --vc-header-arrow-color: var(--vc-gray-500);
-  --vc-header-arrow-hover-bg: var(--vc-gray-200);
-  --vc-header-title-color: var(--vc-gray-900);
-  /* Calendar weekdays */
-  --vc-weekday-color: var(--vc-gray-500);
-  /* Calendar weeknumbers */
-  --vc-weeknumber-color: var(--vc-gray-400);
-  /* Calendar nav */
-  --vc-nav-hover-bg: var(--vc-gray-200);
-  --vc-nav-title-color: var(--vc-gray-900);
-  --vc-nav-item-hover-box-shadow: none;
-  --vc-nav-item-active-color: var(--vc-white);
-  --vc-nav-item-active-bg: var(--vc-accent-500);
-  --vc-nav-item-active-box-shadow: var(--vc-shadow);
-  --vc-nav-item-current-color: var(--vc-accent-600);
-  /* Calendar day popover */
-  --vc-day-popover-container-color: var(--vc-white);
-  --vc-day-popover-container-bg: var(--vc-gray-800);
-  --vc-day-popover-container-border: var(--vc-gray-700);
-  --vc-day-popover-header-color: var(--vc-gray-700);
-  /* Popover content */
-  --vc-popover-content-color: var(--vc-gray-900);
-  --vc-popover-content-bg: var(--vc-gray-50);
-  --vc-popover-content-border: var(--vc-gray-300);
-  /* Time picker */
-  --vc-time-picker-border: var(--vc-gray-300);
-  --vc-time-weekday-color: var(--vc-gray-700);
-  --vc-time-month-color: var(--vc-accent-600);
-  --vc-time-day-color: var(--vc-accent-600);
-  --vc-time-year-color: var(--vc-gray-500);
-  /* Time select group */
-  --vc-time-select-group-bg: var(--vc-gray-50);
-  --vc-time-select-group-border: var(--vc-gray-300);
-  --vc-time-select-group-icon-color: var(--vc-accent-500);
-  /* Base select */
-  --vc-select-color: var(--vc-gray-900);
-  --vc-select-bg: var(--vc-gray-100);
-  --vc-select-hover-bg: var(--vc-gray-200);
-  /* Calendar day */
-  --vc-day-content-hover-bg: var(--vc-hover-bg);
-  --vc-day-content-disabled-color: var(--vc-gray-400);
-}
-
-/* Calendar attributes */
-
-.vc-light.vc-attr,
-  .vc-light .vc-attr {
-    --vc-content-color: var(--vc-accent-600);
-    --vc-highlight-outline-bg: var(--vc-white);
-    --vc-highlight-outline-border: var(--vc-accent-600);
-    --vc-highlight-outline-content-color: var(--vc-accent-700);
-    --vc-highlight-light-bg: var(--vc-accent-200);
-    --vc-highlight-light-content-color: var(--vc-accent-900);
-    --vc-highlight-solid-bg: var(--vc-accent-600);
-    --vc-highlight-solid-content-color: var(--vc-white);
-    --vc-dot-bg: var(--vc-accent-600);
-    --vc-bar-bg: var(--vc-accent-600);
-  }
-
-.vc-dark {
-  /* Base */
-  --vc-color: var(--vc-white);
-  --vc-bg: var(--vc-gray-900);
-  --vc-border: var(--vc-gray-700);
-  --vc-hover-bg: hsla(216, 15%, 52%, 0.3);
-  --vc-focus-ring: 0 0 0 2px rgb(59 130 246 / 0.7);
-  /* Calendar header */
-  --vc-header-arrow-color: var(--vc-gray-300);
-  --vc-header-arrow-hover-bg: var(--vc-gray-800);
-  --vc-header-title-color: var(--vc-gray-100);
-  /* Calendar weekdays */
-  --vc-weekday-color: var(--vc-accent-200);
-  /* Calendar weeknumbers */
-  --vc-weeknumber-color: var(--vc-gray-500);
-  /* Calendar nav */
-  --vc-nav-hover-bg: var(--vc-gray-700);
-  --vc-nav-title-color: var(--vc-gray-100);
-  --vc-nav-item-hover-box-shadow: none;
-  --vc-nav-item-active-color: var(--vc-white);
-  --vc-nav-item-active-bg: var(--vc-accent-500);
-  --vc-nav-item-active-box-shadow: none;
-  --vc-nav-item-current-color: var(--vc-accent-400);
-  /* Calendar day popover */
-  --vc-day-popover-container-color: var(--vc-gray-800);
-  --vc-day-popover-container-bg: var(--vc-white);
-  --vc-day-popover-container-border: var(--vc-gray-100);
-  --vc-day-popover-header-color: var(--vc-gray-300);
-  /* Popover content */
-  --vc-popover-content-color: var(--vc-white);
-  --vc-popover-content-bg: var(--vc-gray-800);
-  --vc-popover-content-border: var(--vc-gray-700);
-  /* Time picker */
-  --vc-time-picker-border: var(--vc-gray-700);
-  --vc-time-weekday-color: var(--vc-gray-400);
-  --vc-time-month-color: var(--vc-accent-400);
-  --vc-time-day-color: var(--vc-accent-400);
-  --vc-time-year-color: var(--vc-gray-500);
-  /* Time select group */
-  --vc-time-select-group-bg: var(--vc-gray-700);
-  --vc-time-select-group-border: var(--vc-gray-500);
-  --vc-time-select-group-icon-color: var(--vc-accent-400);
-  /* Base select */
-  --vc-select-color: var(--vc-gray-200);
-  --vc-select-bg: var(--vc-gray-700);
-  --vc-select-hover-bg: var(--vc-gray-600);
-  /* Calendar day */
-  --vc-day-content-hover-bg: var(--vc-hover-bg);
-  --vc-day-content-disabled-color: var(--vc-gray-600);
-}
-
-/* Calendar attributes */
-
-.vc-dark.vc-attr,
-  .vc-dark .vc-attr {
-    --vc-content-color: var(--vc-accent-500);
-    --vc-highlight-outline-bg: var(--vc-gray-900);
-    --vc-highlight-outline-border: var(--vc-accent-300);
-    --vc-highlight-outline-content-color: var(--vc-accent-200);
-    --vc-highlight-light-bg: var(--vc-accent-800);
-    --vc-highlight-light-content-color: var(--vc-accent-100);
-    --vc-highlight-solid-bg: var(--vc-accent-500);
-    --vc-highlight-solid-content-color: var(--vc-white);
-    --vc-dot-bg: var(--vc-accent-500);
-    --vc-bar-bg: var(--vc-accent-500);
-  }
 
-.vc-container {
-  position: relative;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: -webkit-max-content;
-  width: max-content;
-  height: -webkit-max-content;
-  height: max-content;
-  font-family: var(--vc-font-family);
-  color: var(--vc-color);
-  background-color: var(--vc-bg);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.vc-container,
-  .vc-container * {
-    box-sizing: border-box;
-  }
-
-.vc-container:focus, .vc-container *:focus {
-      outline: none;
-    }
-
-/* Hides double border within popovers */
-
-.vc-container .vc-container {
-    border: none;
-  }
-
-.vc-bordered {
-  border: 1px solid;
-  border-color: var(--vc-border);
-  border-radius: var(--vc-rounded-lg);
-}
-
-.vc-expanded {
-  min-width: 100%;
-}
-
-.vc-transparent {
-  background-color: transparent;
-}
-
-.vc-date-picker-content {
-  padding: 0;
-  background-color: var(--vc-bg);
-}
-
-.vc-date-picker-content .vc-container {
-    border: 0;
-  }
-
-.v-calendar-date-picker {
-  --vc-bg: var(--kds-color-surface-default);
-  --vc-font-family: var(--kds-core-font-family-roboto);
-  --vc-color: var(--kds-color-text-and-icon-neutral);
-  --vc-border: transparent;
-  --vc-rounded: var(--kds-border-radius-container-0-25x);
-
-  --vc-font-normal: 400;
-  --vc-font-medium: 500;
-  --vc-font-semibold: 600;
-  --vc-font-bold: 700;
-
-  --vc-text-2xs: var(--kds-core-font-size-0-62x);
-  --vc-text-xs: var(--kds-core-font-size-0-62x);
-  --vc-text-sm: var(--kds-core-font-size-0-75x);
-  --vc-text-base: var(--kds-core-font-size-0-75x);
-  --vc-text-lg: var(--kds-core-font-size-0-87x);
-  --vc-text-xl: var(--kds-core-font-size-1x);
-  --vc-text-2xl: var(--kds-core-font-size-1-13x);
-
-  --vc-popover-content-color: var(--vc-color);
-  --vc-popover-content-bg: var(--kds-color-surface-default);
-  --vc-popover-content-border: var(--kds-color-border-neutral);
-
-  box-shadow: var(--kds-elevation-level-3);
-& .vc-highlight-content-solid {
-    font-weight: var(--kds-core-font-weight-medium);
-    color: var(--kds-color-text-and-icon-selected);
-    background-color: var(--kds-color-background-selected-initial);
-}
-& button,
-  & .vc-arrow {
-    color: var(--kds-color-text-and-icon-neutral);
-    background-color: var(--kds-color-background-neutral-initial);
-    border: var(--kds-border-action-transparent);
-&.vc-prev,
-    &.vc-next {
-      width: var(--kds-dimension-component-width-1-25x);
-      height: var(--kds-dimension-component-height-1-25x);
-      border-radius: var(--kds-border-radius-container-0-25x);
-}
-&:hover,
-    &.vc-arrow:hover {
-      background-color: var(--kds-color-background-neutral-hover);
-}
-&:active,
-    &.vc-arrow:active {
-      background-color: var(--kds-color-background-neutral-active);
-}
-&:focus-within {
-      box-shadow: none;
-}
-}
-& .vc-pane {
-    width: max-content;
-    min-width: initial;
-& .vc-weeks {
-      display: grid;
-      gap: 4px;
-      width: max-content;
-      min-width: initial;
-& .vc-week {
-        gap: 4px;
-& .vc-day {
-          min-height: var(--kds-dimension-component-height-1-5x);
-          border-radius: var(--kds-border-radius-container-0-25x);
-& .vc-highlight {
-            border-radius: var(--kds-border-radius-container-0-25x);
-}
-& .vc-day-content {
-            width: var(--kds-dimension-component-height-1-5x);
-            height: var(--kds-dimension-component-height-1-5x);
-            border-radius: var(--kds-border-radius-container-0-25x);
-}
-&:focus-within {
-            background-color: var(--kds-color-background-neutral-active);
-            box-shadow: none;
-}
-}
-}
-}
-}
-.vc-focus:focus-within {
-    outline: var(--kds-border-action-focused);
-    outline-offset: var(--kds-spacing-offset-focus);
-    box-shadow: none;
-}
-}
-.vc-popover-content {
-  --vc-popover-content-color: var(--kds-color-text-and-icon-neutral);
-  --vc-popover-content-bg: var(--kds-color-surface-muted);
-  --vc-popover-content-border: transparent;
-
-  box-shadow: var(--kds-elevation-level-3);
-& .vc-nav-item,
-  & .vc-nav-arrow,
-  & .vc-nav-title {
-    width: initial;
-    height: var(--kds-dimension-component-height-1-5x);
-    padding: 0 var(--kds-spacing-container-0-25x);
-    font-size: var(--kds-core-font-size-0-75x);
-    font-weight: var(--kds-core-font-weight-regular);
-    line-height: var(--kds-core-line-height-singleline);
-    color: var(--kds-color-text-and-icon-neutral);
-    background-color: var(--kds-color-background-neutral-initial);
-    border: var(--kds-border-action-transparent);
-&.is-left,
-    &.is-right {
-      width: var(--kds-dimension-component-width-1-25x);
-      height: var(--kds-dimension-component-height-1-25x);
-      padding: 0;
-      margin-top: 2px;
-      border-radius: var(--kds-border-radius-container-0-25x);
-}
-&:hover,
-    &.vc-arrow:hover {
-      background-color: var(--kds-color-background-neutral-hover);
-}
-&:active,
-    &.vc-arrow:active {
-      background-color: var(--kds-color-background-neutral-active);
-}
-&:focus-within {
-      box-shadow: none;
-}
-&.is-active {
-      color: var(--kds-color-text-and-icon-selected);
-      background-color: var(--kds-color-background-selected-initial);
-      box-shadow: none;
-&:hover {
-        background-color: var(--kds-color-background-selected-hover);
-}
-}
-}
+  /* 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] {
@@ -3411,6 +2245,44 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   display: none;
 }
 
+.kds-time-picker[data-v-c2f06c87] {
+  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-selected-time[data-v-c2f06c87] {
+  font: var(--kds-font-base-title-large-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+  text-align: center;
+}
+.kds-time-picker-fields[data-v-c2f06c87] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: flex-start;
+}
+.kds-time-picker-field[data-v-c2f06c87] {
+  flex: 1;
+  min-width: var(--kds-dimension-component-width-4x);
+}
+.kds-time-picker-field-trash[data-v-c2f06c87] {
+  margin-top: calc(
+    var(--kds-dimension-component-height-1x) +
+      var(--kds-spacing-input-label-spacing-bottom)
+  );
+}
+.kds-time-picker-divider[data-v-c2f06c87] {
+  width: 100%;
+}
+.kds-time-picker-actions[data-v-c2f06c87] {
+  display: flex;
+  justify-content: center;
+}
+
 .kds-dropdown-trigger-button {
 &[data-v-0f4de8fb] {
   display: flex;
@@ -3478,23 +2350,23 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   );
 }
 
-.kds-dropdown-container[data-v-e61a9cf9] {
+.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-e61a9cf9] {
+.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-e61a9cf9] {
+&[data-v-cdb20fd2] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-e61a9cf9] {
+&.multiline[data-v-cdb20fd2] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
@@ -4335,6 +3207,142 @@ to {
   border-top: var(--kds-border-base-muted);
 }
 
+.kds-nav-item {
+&[data-v-d5db7ff7] {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--kds-spacing-container-0-37x);
+  align-items: center;
+  height: var(--kds-dimension-component-height-1-75x);
+  min-height: var(--kds-dimension-component-height-1-5x);
+  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
+  background: var(--kds-color-background-neutral-initial);
+  border-radius: var(--kds-border-radius-container-0-31x);
+}
+&[data-v-d5db7ff7]: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-d5db7ff7] {
+
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+    min-width: 0;
+    padding: 0;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    border: none;
+}
+&[data-v-d5db7ff7]:focus-visible {
+      outline: none;
+}
+& .content {
+&[data-v-d5db7ff7] {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: row;
+      gap: var(--kds-spacing-container-0-37x);
+      align-items: flex-start;
+      justify-content: center;
+      min-width: 0;
+}
+& .label[data-v-d5db7ff7] {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font: var(--kds-font-base-interactive-medium);
+        color: var(--kds-color-text-and-icon-neutral);
+        text-align: left;
+        white-space: nowrap;
+}
+}
+}
+& .trailing-items {
+&[data-v-d5db7ff7] {
+    display: flex;
+    flex-direction: row;
+    gap: var(--kds-spacing-container-0-37x);
+    align-items: center;
+}
+& .trailing-icon[data-v-d5db7ff7] {
+      color: inherit;
+}
+}
+&[data-v-d5db7ff7]:hover:not(.disabled) {
+    background: var(--kds-color-background-neutral-hover);
+}
+&[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
+    background: var(--kds-color-background-neutral-active);
+}
+&.selected {
+&[data-v-d5db7ff7] {
+    background: var(--kds-color-background-selected-initial);
+}
+& .kds-nav-button .content {
+&[data-v-d5db7ff7] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+& .label[data-v-d5db7ff7] {
+        color: var(--kds-color-text-and-icon-selected);
+}
+}
+& .trailing-items .trailing-icon[data-v-d5db7ff7] {
+      color: var(--kds-color-text-and-icon-selected);
+}
+& .indicator-selected[data-v-d5db7ff7] {
+      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);
+      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-d5db7ff7]:hover:not(.disabled) {
+      background: var(--kds-color-background-selected-hover);
+}
+&[data-v-d5db7ff7]:has(.kds-nav-button:active):not(.disabled) {
+      background: var(--kds-color-background-selected-active);
+}
+}
+&.disabled {
+&[data-v-d5db7ff7] {
+    cursor: not-allowed;
+}
+& .kds-nav-button {
+&[data-v-d5db7ff7] {
+      cursor: not-allowed;
+}
+& .content .label[data-v-d5db7ff7] {
+        color: var(--kds-color-text-and-icon-disabled);
+}
+}
+& .trailing-items .trailing-icon[data-v-d5db7ff7] {
+      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);
+}
+}
+
 .modal-header {
 &[data-v-62740dc9] {
   display: flex;