@takeoff-design/tokens 0.4.0 → 0.5.0

package/dist/scss/_components.scss

@@ -2209,6 +2209,601 @@ body {
   }
 }
 
+.tk-calendar {
+  font-family: var(--family-body, "tk-text", sans-serif);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--text-darkest);
+  align-self: start;
+}
+.tk-calendar:not([data-multiple-months]) {
+  width: var(--tk-calendar-frame-width);
+}
+.tk-calendar {
+  background: var(--static-light);
+  border: var(--spacing-px) solid var(--border-light);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 2px 2px -1px var(--shadow-black-alpha-base, rgba(82, 88, 102, 0.08)), 0 6px 12px -2px var(--shadow-black-alpha-base, rgba(82, 88, 102, 0.08)), 0 8px 20px 0 var(--shadow-black-alpha-base, rgba(82, 88, 102, 0.08));
+  --tk-calendar-cell-size: var(--datepicker-items-base-size);
+  --tk-calendar-cell-radius: var(--datepicker-items-base-radius);
+  --tk-calendar-header-height: 52px;
+  --tk-calendar-body-height: calc(
+    var(--datepicker-body-base-day-v-padding) * 2 + var(--datepicker-items-base-size) + var(--datepicker-body-base-day-row-group-gap) + 6 * (var(--datepicker-items-base-size) + var(--datepicker-body-base-day-row-gap))
+  );
+  --tk-calendar-body-width: calc(var(--datepicker-body-base-day-h-padding) * 2 + 7 * var(--datepicker-items-base-size));
+  --tk-calendar-frame-width: calc(var(--tk-calendar-body-width) + 24px);
+  --tk-calendar-nav-icon-size: 20px;
+  --tk-calendar-nav-button-size: 28px;
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
+.tk-calendar[data-size=small] {
+  --tk-calendar-cell-size: var(--datepicker-items-small-size);
+  --tk-calendar-cell-radius: var(--datepicker-items-small-radius);
+  --tk-calendar-header-height: 46px;
+  --tk-calendar-body-height: calc(
+    var(--datepicker-body-base-day-v-padding) * 2 + var(--datepicker-items-small-size) + var(--datepicker-body-base-day-row-group-gap) + 6 * (var(--datepicker-items-small-size) + var(--datepicker-body-base-day-row-gap))
+  );
+  --tk-calendar-body-width: calc(var(--datepicker-body-base-day-h-padding) * 2 + 7 * var(--datepicker-items-small-size));
+  --tk-calendar-frame-width: calc(var(--tk-calendar-body-width) + 24px);
+  --tk-calendar-nav-icon-size: 20px;
+  --tk-calendar-nav-button-size: 28px;
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+}
+.tk-calendar[data-week-numbers] {
+  --tk-calendar-body-width: calc(var(--datepicker-body-base-day-h-padding) * 2 + 8 * var(--tk-calendar-cell-size));
+}
+.tk-calendar .tk-calendar-month-grid {
+  display: table;
+  margin: 0;
+  overflow: visible;
+  text-indent: 0;
+  border: 0;
+}
+.tk-calendar .tk-calendar-month-grid thead {
+  background: transparent;
+  border: 0;
+}
+.tk-calendar .tk-calendar-weekdays,
+.tk-calendar .tk-calendar-weekday,
+.tk-calendar .tk-calendar-weeks,
+.tk-calendar .tk-calendar-week,
+.tk-calendar .tk-calendar-week-number,
+.tk-calendar .tk-calendar-week-number-header,
+.tk-calendar .tk-calendar-day {
+  background: transparent;
+  border: 0;
+}
+.tk-calendar .tk-calendar-day {
+  color: inherit;
+}
+
+.tk-calendar-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.tk-calendar:not([data-multiple-months]) .tk-calendar-months {
+  width: var(--tk-calendar-frame-width);
+}
+
+.tk-calendar-month {
+  display: flex;
+  flex-direction: column;
+}
+.tk-calendar:not([data-multiple-months]) .tk-calendar-month {
+  width: var(--tk-calendar-frame-width);
+  box-sizing: border-box;
+}
+.tk-calendar[data-nav-layout=after] .tk-calendar-month {
+  position: relative;
+}
+.tk-calendar[data-nav-layout=around] .tk-calendar-month {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  align-content: start;
+}
+.tk-calendar[data-nav-layout=around] .tk-calendar-month .tk-calendar-month-grid,
+.tk-calendar[data-nav-layout=around] .tk-calendar-month .tk-calendar-month-year-grid {
+  grid-column: 1/-1;
+}
+
+.tk-calendar-month-caption {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--tk-calendar-header-height);
+  padding: var(--datepicker-header-base-top-padding) var(--datepicker-header-base-h-padding) var(--datepicker-header-base-bottom-padding);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+.tk-calendar:not([data-nav-layout]) .tk-calendar-month-caption {
+  padding-inline: calc(var(--tk-calendar-nav-button-size) * 2 + var(--datepicker-header-base-h-padding));
+}
+.tk-calendar:not([data-nav-layout]) .tk-calendar-month-caption:has(.tk-calendar-dropdowns) {
+  padding-inline: calc(var(--tk-calendar-nav-button-size) + var(--datepicker-header-base-h-padding));
+}
+.tk-calendar[data-nav-layout=after] .tk-calendar-month-caption {
+  justify-content: flex-start;
+  padding-inline-end: calc(var(--tk-calendar-nav-button-size) * 4);
+}
+.tk-calendar[data-header-type=basic] .tk-calendar-month-caption {
+  border-bottom: var(--spacing-px) solid var(--border-light);
+}
+.tk-calendar-month-caption::before {
+  content: "";
+  position: absolute;
+  inset: var(--datepicker-header-base-top-padding) var(--datepicker-header-base-h-padding) var(--datepicker-header-base-bottom-padding);
+  border-radius: var(--radius-m-base);
+}
+.tk-calendar[data-header-type=divided] .tk-calendar-month-caption::before {
+  border: var(--spacing-px) solid var(--border-light);
+}
+.tk-calendar[data-header-type=light] .tk-calendar-month-caption::before {
+  background: var(--background-lightest);
+}
+.tk-calendar[data-header-type=primary] .tk-calendar-month-caption::before {
+  background: var(--primary-base);
+}
+.tk-calendar[data-header-type=dark] .tk-calendar-month-caption::before {
+  background: var(--neutral-800);
+}
+.tk-calendar[data-multiple-months] .tk-calendar-month:not(:first-child) .tk-calendar-month-caption::before {
+  inset-inline-start: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.tk-calendar[data-multiple-months] .tk-calendar-month:not(:last-child) .tk-calendar-month-caption::before {
+  inset-inline-end: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.tk-calendar[data-multiple-months][data-header-type=divided] .tk-calendar-month:not(:first-child) .tk-calendar-month-caption::before {
+  border-inline-start: 0;
+}
+.tk-calendar[data-multiple-months][data-header-type=divided] .tk-calendar-month:not(:last-child) .tk-calendar-month-caption::before {
+  border-inline-end: 0;
+}
+
+.tk-calendar-caption-label {
+  position: relative;
+  color: var(--text-darkest);
+  text-align: center;
+  font-family: var(--desktop-body-s-font);
+  font-size: var(--desktop-body-s-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--desktop-body-s-line-height);
+  padding-inline: var(--datepicker-header-base-date-text-h-padding);
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tk-calendar[data-size=small] .tk-calendar-caption-label {
+  color: var(--text-base);
+  font-family: var(--desktop-body-xs-font);
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+}
+.tk-calendar[data-nav-layout=after] .tk-calendar-caption-label {
+  padding-inline-start: 0;
+}
+.tk-calendar:is([data-header-type=primary], [data-header-type=dark]) .tk-calendar-caption-label {
+  color: var(--static-white);
+}
+
+.tk-calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tk-calendar[data-view] .tk-calendar-nav {
+  gap: var(--datepicker-header-base-navigation-gap);
+}
+.tk-calendar[data-view] .tk-calendar-nav .tk-calendar-nav-previous-month {
+  margin-inline-end: auto;
+}
+.tk-calendar[data-view] .tk-calendar-nav .tk-calendar-nav-next-month {
+  margin-inline-start: auto;
+}
+.tk-calendar:not([data-nav-layout]) .tk-calendar-nav {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  inset-inline: var(--datepicker-header-base-h-padding);
+  pointer-events: none;
+}
+.tk-calendar[data-nav-layout=after] .tk-calendar-nav {
+  position: absolute;
+  top: 0;
+  inset-inline-end: var(--datepicker-header-base-h-padding);
+}
+
+.tk-calendar-nav-previous-month,
+.tk-calendar-nav-next-month,
+.tk-calendar-nav-previous-year,
+.tk-calendar-nav-next-year {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tk-calendar-nav-button-size);
+  height: var(--tk-calendar-header-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--tk-calendar-cell-radius);
+  background: transparent;
+  color: var(--icon-base);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: color 0.2s ease-in-out;
+}
+.tk-calendar-nav-previous-month:hover,
+.tk-calendar-nav-next-month:hover,
+.tk-calendar-nav-previous-year:hover,
+.tk-calendar-nav-next-year:hover {
+  color: var(--icon-darkest);
+}
+.tk-calendar-nav-previous-month[aria-disabled=true],
+.tk-calendar-nav-next-month[aria-disabled=true],
+.tk-calendar-nav-previous-year[aria-disabled=true],
+.tk-calendar-nav-next-year[aria-disabled=true] {
+  color: var(--icon-sub-base);
+  cursor: not-allowed;
+}
+.tk-calendar-nav-previous-month[aria-disabled=true]:hover,
+.tk-calendar-nav-next-month[aria-disabled=true]:hover,
+.tk-calendar-nav-previous-year[aria-disabled=true]:hover,
+.tk-calendar-nav-next-year[aria-disabled=true]:hover {
+  color: var(--icon-sub-base);
+}
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-month,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-month,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-year,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-year {
+  color: var(--static-white);
+}
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-month:hover,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-month:hover,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-year:hover,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-year:hover {
+  color: var(--static-white);
+}
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-month[aria-disabled=true], .tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-month[aria-disabled=true]:hover,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-month[aria-disabled=true],
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-month[aria-disabled=true]:hover,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-year[aria-disabled=true],
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-previous-year[aria-disabled=true]:hover,
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-year[aria-disabled=true],
+.tk-calendar[data-header-type=primary] .tk-calendar-nav-next-year[aria-disabled=true]:hover {
+  color: var(--primary-sub-base);
+}
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-month,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-month,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-year,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-year {
+  color: var(--static-white);
+}
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-month:hover,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-month:hover,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-year:hover,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-year:hover {
+  color: var(--static-white);
+}
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-month[aria-disabled=true], .tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-month[aria-disabled=true]:hover,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-month[aria-disabled=true],
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-month[aria-disabled=true]:hover,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-year[aria-disabled=true],
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-previous-year[aria-disabled=true]:hover,
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-year[aria-disabled=true],
+.tk-calendar[data-header-type=dark] .tk-calendar-nav-next-year[aria-disabled=true]:hover {
+  color: var(--neutral-500);
+}
+.tk-calendar-nav-previous-month:focus-visible,
+.tk-calendar-nav-next-month:focus-visible,
+.tk-calendar-nav-previous-year:focus-visible,
+.tk-calendar-nav-next-year:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--primary-focus);
+}
+
+.tk-calendar-chevron {
+  width: var(--tk-calendar-nav-icon-size);
+  height: var(--tk-calendar-nav-icon-size);
+  flex-shrink: 0;
+  fill: currentcolor;
+}
+.tk-calendar[dir=rtl] .tk-calendar-nav .tk-calendar-chevron {
+  transform: scaleX(-1);
+}
+
+.tk-calendar-dropdowns {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--datepicker-header-base-date-text-gap);
+}
+
+.tk-calendar-dropdown-root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  padding-inline: var(--datepicker-header-base-date-text-h-padding);
+  border-radius: var(--tk-calendar-cell-radius);
+  color: var(--text-darkest);
+}
+.tk-calendar:is([data-header-type=primary], [data-header-type=dark]) .tk-calendar-dropdown-root {
+  color: var(--static-white);
+}
+.tk-calendar:is([data-header-type=primary], [data-header-type=dark]) .tk-calendar-dropdown-root:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+.tk-calendar-dropdown-root .tk-calendar-caption-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  padding-inline: 0;
+}
+.tk-calendar-dropdown-root:hover {
+  background: var(--background-lightest);
+}
+.tk-calendar-dropdown-root[data-disabled=true] {
+  color: var(--text-sub-base);
+  pointer-events: none;
+}
+
+.tk-calendar-dropdown {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+  appearance: none;
+}
+
+.tk-calendar-month-grid {
+  width: max-content;
+  align-self: center;
+  flex: none;
+  padding: var(--datepicker-body-base-day-v-padding) var(--datepicker-body-base-day-h-padding);
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.tk-calendar[data-view] .tk-calendar-month-grid {
+  box-sizing: border-box;
+  width: var(--tk-calendar-body-width);
+  min-height: var(--tk-calendar-body-height);
+}
+
+.tk-calendar-caption-trigger {
+  padding: var(--spacing-xxs) var(--datepicker-header-base-date-text-h-padding);
+  border: 0;
+  border-radius: var(--tk-calendar-cell-radius);
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+.tk-calendar-caption-trigger:hover {
+  background: var(--background-lightest);
+}
+.tk-calendar:is([data-header-type=primary], [data-header-type=dark]) .tk-calendar-caption-trigger:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+.tk-calendar-caption-trigger[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.tk-calendar-caption-trigger[aria-disabled=true]:hover {
+  background: transparent;
+}
+.tk-calendar-caption-trigger:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--primary-focus);
+}
+
+.tk-calendar-month-year-grid {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  align-self: center;
+  gap: var(--spacing-xs);
+  width: var(--tk-calendar-body-width);
+  min-height: var(--tk-calendar-body-height);
+  padding: var(--datepicker-body-base-day-v-padding) var(--datepicker-body-base-day-h-padding);
+}
+
+.tk-calendar-month-year-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  justify-self: center;
+  height: var(--tk-calendar-cell-size);
+  min-width: var(--tk-calendar-cell-size);
+  padding: 0 var(--spacing-m-base);
+  border: 0;
+  border-radius: var(--tk-calendar-cell-radius);
+  background: transparent;
+  font: inherit;
+  font-weight: 400;
+  color: var(--text-darkest);
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+.tk-calendar-month-year-cell:hover:not([data-selected], [data-disabled]) {
+  background: var(--background-lightest);
+}
+.tk-calendar-month-year-cell[data-selected] {
+  background: var(--primary-base);
+  color: var(--text-lightest);
+}
+.tk-calendar-month-year-cell[data-disabled] {
+  color: var(--text-sub-base);
+  cursor: not-allowed;
+}
+.tk-calendar-month-year-cell:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--primary-focus);
+}
+
+.tk-calendar-weekdays {
+  color: var(--text-base);
+}
+.tk-calendar-weekdays .tk-calendar-weekday {
+  padding-bottom: var(--datepicker-body-base-day-row-group-gap);
+}
+
+.tk-calendar-weekday {
+  width: var(--tk-calendar-cell-size);
+  height: var(--tk-calendar-cell-size);
+  padding: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  text-transform: capitalize;
+  color: var(--text-base);
+}
+
+.tk-calendar-weeks {
+  border: 0;
+}
+
+.tk-calendar-week {
+  border: 0;
+}
+
+.tk-calendar-week-number {
+  width: var(--tk-calendar-cell-size);
+  padding-block: calc(var(--datepicker-body-base-day-row-gap) / 2);
+  padding-inline: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  color: var(--text-sub-base);
+}
+
+.tk-calendar-week-number-header {
+  width: var(--tk-calendar-cell-size);
+  padding: 0;
+  color: var(--text-sub-base);
+}
+
+.tk-calendar-day {
+  position: relative;
+  width: var(--tk-calendar-cell-size);
+  padding-block: calc(var(--datepicker-body-base-day-row-gap) / 2);
+  padding-inline: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+.tk-calendar-day::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: var(--tk-calendar-cell-size);
+  transform: translateY(-50%);
+  background: transparent;
+}
+.tk-calendar-day[data-outside], .tk-calendar-day[data-disabled] {
+  color: var(--text-sub-base);
+}
+.tk-calendar-day[data-disabled] {
+  pointer-events: none;
+}
+.tk-calendar-day.tk-calendar-day-range-middle::before {
+  background: var(--primary-lightest);
+}
+.tk-calendar-day:first-of-type::before {
+  border-start-start-radius: var(--tk-calendar-cell-radius);
+  border-end-start-radius: var(--tk-calendar-cell-radius);
+}
+.tk-calendar-day:last-of-type::before {
+  border-start-end-radius: var(--tk-calendar-cell-radius);
+  border-end-end-radius: var(--tk-calendar-cell-radius);
+}
+
+.tk-calendar-day-button {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tk-calendar-cell-size);
+  height: var(--tk-calendar-cell-size);
+  margin-inline: auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--tk-calendar-cell-radius);
+  background: transparent;
+  font: inherit;
+  font-weight: 400;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+.tk-calendar-day:not([data-selected], [data-disabled], .tk-calendar-day-range-middle) .tk-calendar-day-button:hover {
+  background: var(--background-lightest);
+}
+.tk-calendar-day[data-today]:not([data-selected]) .tk-calendar-day-button {
+  border: var(--spacing-px) solid var(--states-info-sub-base);
+  background: var(--background-lightest);
+}
+.tk-calendar-day[data-selected]:not(.tk-calendar-day-range-middle) .tk-calendar-day-button {
+  background: var(--primary-base);
+  color: var(--text-lightest);
+}
+.tk-calendar-day[data-selected][data-disabled] .tk-calendar-day-button {
+  background: var(--primary-lightest);
+  color: var(--primary-light);
+}
+.tk-calendar-day.tk-calendar-day-range-start:is(:has(+ .tk-calendar-day-range-middle), :has(+ .tk-calendar-day-range-end)) .tk-calendar-day-button {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+:is(.tk-calendar-day-range-start, .tk-calendar-day-range-middle) + .tk-calendar-day.tk-calendar-day-range-end .tk-calendar-day-button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.tk-calendar-day-button:disabled {
+  cursor: not-allowed;
+}
+.tk-calendar-day-button:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--primary-focus);
+}
+
+.tk-calendar-footer {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--datepicker-footer-base-gap);
+  padding: var(--datepicker-footer-base-v-padding) var(--datepicker-footer-base-h-padding);
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+  color: var(--text-dark);
+}
+
 .tk-card {
   font-family: var(--family-body, "tk-text", sans-serif);
   display: flex;
@@ -3298,7 +3893,8 @@ body {
 .tk-input .tk-input-clear-button,
 .tk-input .tk-input-spinner,
 .tk-input .tk-input-reveal-button,
-.tk-input .tk-input-stepper {
+.tk-input .tk-input-stepper,
+.tk-input .tk-input-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3313,7 +3909,8 @@ body {
 .tk-input .tk-input-clear-button,
 .tk-input .tk-input-reveal-button,
 .tk-input .tk-input-decrement,
-.tk-input .tk-input-increment {
+.tk-input .tk-input-increment,
+.tk-input .tk-input-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3329,13 +3926,15 @@ body {
 .tk-input .tk-input-clear-button:hover,
 .tk-input .tk-input-reveal-button:hover,
 .tk-input .tk-input-decrement:hover,
-.tk-input .tk-input-increment:hover {
+.tk-input .tk-input-increment:hover,
+.tk-input .tk-input-action:hover {
   color: var(--icon-darkest);
 }
 .tk-input .tk-input-clear-button:focus-visible,
 .tk-input .tk-input-reveal-button:focus-visible,
 .tk-input .tk-input-decrement:focus-visible,
-.tk-input .tk-input-increment:focus-visible {
+.tk-input .tk-input-increment:focus-visible,
+.tk-input .tk-input-action:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--neutral-focus);
@@ -3349,7 +3948,10 @@ body {
 .tk-input .tk-input-decrement[aria-disabled=true],
 .tk-input .tk-input-increment[data-disabled],
 .tk-input .tk-input-increment:disabled,
-.tk-input .tk-input-increment[aria-disabled=true] {
+.tk-input .tk-input-increment[aria-disabled=true],
+.tk-input .tk-input-action[data-disabled],
+.tk-input .tk-input-action:disabled,
+.tk-input .tk-input-action[aria-disabled=true] {
   cursor: not-allowed;
   color: var(--icon-base);
   pointer-events: none;
@@ -3414,7 +4016,11 @@ body {
 .tk-input .tk-input-stepper ~ .tk-input-reveal-button {
   margin-inline-start: 0;
 }
-.tk-input:has(.tk-input-clear-button) .tk-input-trailing-icon, .tk-input:has(.tk-input-spinner) .tk-input-trailing-icon, .tk-input:has(.tk-input-reveal-button) .tk-input-trailing-icon, .tk-input:has(.tk-input-stepper) .tk-input-trailing-icon {
+.tk-input :is(.tk-input-clear-button, .tk-input-spinner, .tk-input-reveal-button, .tk-input-stepper) ~ .tk-input-action,
+.tk-input .tk-input-action ~ :is(.tk-input-clear-button, .tk-input-spinner, .tk-input-reveal-button, .tk-input-stepper) {
+  margin-inline-start: 0;
+}
+.tk-input:has(.tk-input-clear-button) .tk-input-trailing-icon, .tk-input:has(.tk-input-spinner) .tk-input-trailing-icon, .tk-input:has(.tk-input-reveal-button) .tk-input-trailing-icon, .tk-input:has(.tk-input-stepper) .tk-input-trailing-icon, .tk-input:has(.tk-input-action) .tk-input-trailing-icon {
   margin-inline-start: 0;
 }
 .tk-input[data-size=large] {
@@ -3445,7 +4051,8 @@ body {
 .tk-input[data-size=large] .tk-input-spinner,
 .tk-input[data-size=large] .tk-input-reveal-button,
 .tk-input[data-size=large] .tk-input-decrement,
-.tk-input[data-size=large] .tk-input-increment {
+.tk-input[data-size=large] .tk-input-increment,
+.tk-input[data-size=large] .tk-input-action {
   width: var(--input-external-label-large-icon-size);
   height: var(--input-external-label-large-icon-size);
   font-size: var(--input-external-label-large-icon-size);
@@ -3457,14 +4064,16 @@ body {
 .tk-input[data-size=large] .tk-input-clear-button,
 .tk-input[data-size=large] .tk-input-reveal-button,
 .tk-input[data-size=large] .tk-input-decrement,
-.tk-input[data-size=large] .tk-input-increment {
+.tk-input[data-size=large] .tk-input-increment,
+.tk-input[data-size=large] .tk-input-action {
   min-width: var(--input-external-label-large-icon-size);
   min-height: var(--input-external-label-large-icon-size);
 }
 .tk-input[data-size=large] .tk-input-clear-button .tk-button-content,
 .tk-input[data-size=large] .tk-input-reveal-button .tk-button-content,
 .tk-input[data-size=large] .tk-input-decrement .tk-button-content,
-.tk-input[data-size=large] .tk-input-increment .tk-button-content {
+.tk-input[data-size=large] .tk-input-increment .tk-button-content,
+.tk-input[data-size=large] .tk-input-action .tk-button-content {
   width: var(--input-external-label-large-icon-size);
   height: var(--input-external-label-large-icon-size);
   font-size: var(--input-external-label-large-icon-size);
@@ -3497,7 +4106,8 @@ body {
 .tk-input[data-size=base] .tk-input-spinner,
 .tk-input[data-size=base] .tk-input-reveal-button,
 .tk-input[data-size=base] .tk-input-decrement,
-.tk-input[data-size=base] .tk-input-increment {
+.tk-input[data-size=base] .tk-input-increment,
+.tk-input[data-size=base] .tk-input-action {
   width: var(--input-external-label-base-icon-size);
   height: var(--input-external-label-base-icon-size);
   font-size: var(--input-external-label-base-icon-size);
@@ -3509,14 +4119,16 @@ body {
 .tk-input[data-size=base] .tk-input-clear-button,
 .tk-input[data-size=base] .tk-input-reveal-button,
 .tk-input[data-size=base] .tk-input-decrement,
-.tk-input[data-size=base] .tk-input-increment {
+.tk-input[data-size=base] .tk-input-increment,
+.tk-input[data-size=base] .tk-input-action {
   min-width: var(--input-external-label-base-icon-size);
   min-height: var(--input-external-label-base-icon-size);
 }
 .tk-input[data-size=base] .tk-input-clear-button .tk-button-content,
 .tk-input[data-size=base] .tk-input-reveal-button .tk-button-content,
 .tk-input[data-size=base] .tk-input-decrement .tk-button-content,
-.tk-input[data-size=base] .tk-input-increment .tk-button-content {
+.tk-input[data-size=base] .tk-input-increment .tk-button-content,
+.tk-input[data-size=base] .tk-input-action .tk-button-content {
   width: var(--input-external-label-base-icon-size);
   height: var(--input-external-label-base-icon-size);
   font-size: var(--input-external-label-base-icon-size);
@@ -3549,7 +4161,8 @@ body {
 .tk-input[data-size=small] .tk-input-spinner,
 .tk-input[data-size=small] .tk-input-reveal-button,
 .tk-input[data-size=small] .tk-input-decrement,
-.tk-input[data-size=small] .tk-input-increment {
+.tk-input[data-size=small] .tk-input-increment,
+.tk-input[data-size=small] .tk-input-action {
   width: var(--input-external-label-small-icon-size);
   height: var(--input-external-label-small-icon-size);
   font-size: var(--input-external-label-small-icon-size);
@@ -3561,14 +4174,16 @@ body {
 .tk-input[data-size=small] .tk-input-clear-button,
 .tk-input[data-size=small] .tk-input-reveal-button,
 .tk-input[data-size=small] .tk-input-decrement,
-.tk-input[data-size=small] .tk-input-increment {
+.tk-input[data-size=small] .tk-input-increment,
+.tk-input[data-size=small] .tk-input-action {
   min-width: var(--input-external-label-small-icon-size);
   min-height: var(--input-external-label-small-icon-size);
 }
 .tk-input[data-size=small] .tk-input-clear-button .tk-button-content,
 .tk-input[data-size=small] .tk-input-reveal-button .tk-button-content,
 .tk-input[data-size=small] .tk-input-decrement .tk-button-content,
-.tk-input[data-size=small] .tk-input-increment .tk-button-content {
+.tk-input[data-size=small] .tk-input-increment .tk-button-content,
+.tk-input[data-size=small] .tk-input-action .tk-button-content {
   width: var(--input-external-label-small-icon-size);
   height: var(--input-external-label-small-icon-size);
   font-size: var(--input-external-label-small-icon-size);
@@ -7266,6 +7881,28 @@ body {
   text-decoration: none;
 }
 
+.tk-popover-content.tk-datepicker-panel {
+  max-width: none;
+  width: max-content;
+  padding: 0;
+  gap: 0;
+  border-radius: var(--radius-xl);
+}
+.tk-popover-content.tk-datepicker-panel .tk-calendar {
+  border: 0;
+  box-shadow: none;
+}
+.tk-popover-content.tk-datepicker-panel .tk-calendar .tk-calendar-footer {
+  border-top: var(--spacing-px) solid var(--border-light);
+  border-end-end-radius: var(--radius-xl);
+  border-end-start-radius: var(--radius-xl);
+}
+.tk-popover-content.tk-datepicker-panel .tk-calendar + * {
+  border-top: var(--spacing-px) solid var(--border-light);
+  border-end-end-radius: var(--radius-xl);
+  border-end-start-radius: var(--radius-xl);
+}
+
 .tk-popover-trigger {
   cursor: pointer;
 }