@takeoff-design/tokens 0.3.0 → 0.5.0

package/dist/scss/_components.scss

@@ -209,7 +209,6 @@ body {
   width: 100%;
   height: 100%;
   fill: currentColor;
-  stroke: currentColor;
 }
 .tk-button .tk-button-content-symbol {
   display: inline-flex;
@@ -1564,6 +1563,7 @@ body {
 .tk-alert[data-variant=success][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-success-sub-base, #a0e6ba) 100%);
+  border-color: var(--states-success-base);
 }
 .tk-alert[data-variant=warning] {
   border-color: var(--states-warning-sub-base);
@@ -1585,6 +1585,7 @@ body {
 .tk-alert[data-variant=warning][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-warning-sub-base, #f6de95) 100%);
+  border-color: var(--states-warning-base);
 }
 .tk-alert[data-variant=info] {
   border-color: var(--states-info-sub-base);
@@ -1606,6 +1607,7 @@ body {
 .tk-alert[data-variant=info][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-info-sub-base, #abc9fb) 100%);
+  border-color: var(--states-info-base);
 }
 .tk-alert[data-variant=danger] {
   border-color: var(--states-danger-sub-base);
@@ -1627,6 +1629,7 @@ body {
 .tk-alert[data-variant=danger][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-danger-sub-base, #ffaca7) 100%);
+  border-color: var(--states-danger-base);
 }
 .tk-alert[data-variant=neutral] {
   border-color: var(--border-sub-base);
@@ -1648,12 +1651,16 @@ body {
 .tk-alert[data-variant=neutral][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--background-sub-base, #cacfd8) 100%);
+  border-color: var(--background-sub-base);
 }
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-title,
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-description,
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-action {
   color: var(--text-lightest);
 }
+.tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-action.tk-button {
+  color: var(--text-lightest);
+}
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-action:hover,
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-close:hover {
   background-color: var(--overlay-white-light);
@@ -1698,6 +1705,8 @@ body {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  align-self: flex-start;
+  margin-inline-start: auto;
   border: 0;
   border-radius: var(--radius-m-base);
   background: transparent;
@@ -2174,30 +2183,625 @@ body {
 .tk-toaster[data-placement^=bottom] .tk-toast[data-status=dismissing] {
   transform: translateY(var(--toast-dismiss-offset));
 }
-.tk-toast .tk-alert {
-  display: grid;
-  align-items: flex-start;
-  gap: var(--alert-base-content-gap);
-  grid-template-areas: "content close" "actions actions";
-  grid-template-columns: minmax(0, 1fr) auto;
+.tk-toast .tk-alert {
+  display: grid;
+  align-items: flex-start;
+  gap: var(--alert-base-content-gap);
+  grid-template-areas: "content close" "actions actions";
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.tk-toast .tk-alert-content {
+  grid-area: content;
+  min-width: 0;
+}
+.tk-toast .tk-alert-actions {
+  grid-area: actions;
+  justify-content: flex-start;
+  padding-inline-start: 0;
+}
+.tk-toast .tk-alert-close {
+  grid-area: close;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tk-toast {
+    animation: none;
+    transition: none;
+  }
+}
+
+.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;
 }
-.tk-toast .tk-alert-content {
-  grid-area: content;
-  min-width: 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-toast .tk-alert-actions {
-  grid-area: actions;
-  justify-content: flex-start;
-  padding-inline-start: 0;
+.tk-calendar-day-button:disabled {
+  cursor: not-allowed;
 }
-.tk-toast .tk-alert-close {
-  grid-area: close;
+.tk-calendar-day-button:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--primary-focus);
 }
-@media (prefers-reduced-motion: reduce) {
-  .tk-toast {
-    animation: none;
-    transition: none;
-  }
+
+.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 {
@@ -2826,18 +3430,6 @@ body {
 .tk-drawer-panel[data-placement=bottom][data-state=closed] {
   transform: translateY(100%);
 }
-.tk-drawer-panel[data-placement=full-screen] {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 0;
-  transition: none;
-  transform: none;
-}
-.tk-drawer-panel[data-placement=full-screen][data-state=closed] {
-  transform: scale(0.95);
-  opacity: 0;
-}
 
 .tk-drawer-header {
   display: flex;
@@ -2981,6 +3573,10 @@ body {
   gap: var(--dropdown-items-basic-large-gap);
   border-radius: var(--dropdown-items-basic-large-radius);
 }
+.tk-dropdown-content[data-size=large] .tk-dropdown-label {
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
 .tk-dropdown-content[data-size=base] {
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
@@ -2994,6 +3590,9 @@ body {
   gap: var(--dropdown-items-basic-small-gap);
   border-radius: var(--dropdown-items-basic-small-radius);
 }
+.tk-dropdown-content[data-size=small] .tk-dropdown-label {
+  font-size: 11px;
+}
 
 .tk-dropdown-viewport {
   display: flex;
@@ -3049,16 +3648,23 @@ body {
 }
 
 .tk-dropdown-label {
-  padding-inline: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-l);
+  padding-inline: var(--spacing-m-base);
   padding-block: 0.25rem;
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
-  font-weight: 500;
-  color: var(--text-sub-base);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  font-weight: 400;
+  color: var(--text-dark);
   user-select: none;
 }
+.tk-dropdown-label::after {
+  content: "";
+  flex: 1 1 auto;
+  height: 1px;
+  background-color: var(--border-light);
+}
 
 .tk-dropdown-separator {
   flex-shrink: 0;
@@ -3089,18 +3695,21 @@ body {
   width: 100%;
 }
 .tk-field .tk-field-label {
+  padding: var(--input-external-label-large-label-v-padding) var(--input-external-label-large-label-h-padding);
   color: var(--text-darkest);
   font-weight: 400;
   font-size: var(--desktop-label-m-base-size);
   line-height: var(--desktop-label-m-base-line-height);
   cursor: default;
 }
+.tk-field:has(> [data-size=small]) > .tk-field-label {
+  padding: var(--input-external-label-small-label-v-padding) var(--input-external-label-small-label-h-padding);
+}
 .tk-field .tk-field-asterisk {
   color: var(--states-danger-base);
   font-size: var(--desktop-label-s-size);
   font-weight: 300;
   line-height: var(--desktop-label-s-line-height);
-  margin-inline-start: 0.125rem;
 }
 .tk-field[data-disabled] .tk-field-label {
   color: var(--text-sub-base);
@@ -3116,7 +3725,6 @@ body {
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
   font-weight: 400;
-  margin-block-start: var(--spacing-xxs);
 }
 .tk-field .tk-field-description-icon,
 .tk-field .tk-field-error-message-icon {
@@ -3125,8 +3733,9 @@ body {
   justify-content: center;
   flex-shrink: 0;
   height: var(--desktop-body-xs-line-height);
-  font-size: 0.875rem;
+  font-size: var(--desktop-body-xs-size);
   line-height: 1;
+  transform: translateY(-1px);
 }
 .tk-field .tk-field-description {
   color: var(--text-base);
@@ -3284,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;
@@ -3299,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;
@@ -3315,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);
@@ -3335,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;
@@ -3400,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] {
@@ -3413,6 +4033,9 @@ body {
   min-height: 3rem;
   height: auto;
 }
+.tk-input[data-size=large]:has(.tk-input-chips) .tk-chip {
+  height: var(--desktop-body-m-base-line-height);
+}
 .tk-input[data-size=large] .tk-input-field {
   font-size: var(--desktop-body-m-base-size);
   line-height: var(--desktop-body-m-base-line-height);
@@ -3428,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);
@@ -3440,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);
@@ -3462,6 +4088,9 @@ body {
   min-height: 2.5rem;
   height: auto;
 }
+.tk-input[data-size=base]:has(.tk-input-chips) .tk-chip {
+  height: var(--desktop-body-s-line-height);
+}
 .tk-input[data-size=base] .tk-input-field {
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
@@ -3477,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);
@@ -3489,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);
@@ -3511,6 +4143,9 @@ body {
   min-height: 2rem;
   height: auto;
 }
+.tk-input[data-size=small]:has(.tk-input-chips) .tk-chip {
+  height: var(--desktop-body-xs-line-height);
+}
 .tk-input[data-size=small] .tk-input-field {
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
@@ -3526,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);
@@ -3538,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);
@@ -3588,6 +4226,7 @@ body {
   line-height: var(--desktop-label-m-base-line-height);
   cursor: default;
   margin: 0;
+  padding: var(--input-external-label-large-label-v-padding) var(--input-external-label-large-label-h-padding);
 }
 .tk-label[for] {
   cursor: pointer;
@@ -3598,7 +4237,6 @@ body {
   font-size: var(--desktop-label-s-size);
   font-weight: 300;
   line-height: var(--desktop-label-s-line-height);
-  margin-inline-start: 0.125rem;
 }
 .tk-label[data-disabled], .tk-label[data-readonly] {
   color: var(--text-sub-base);
@@ -3720,6 +4358,10 @@ body {
   gap: var(--dropdown-items-basic-large-gap);
   border-radius: var(--dropdown-items-basic-large-radius);
 }
+.tk-select-content[data-size=large] .tk-select-label {
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
 .tk-select-content[data-size=base] {
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
@@ -3733,6 +4375,9 @@ body {
   gap: var(--dropdown-items-basic-small-gap);
   border-radius: var(--dropdown-items-basic-small-radius);
 }
+.tk-select-content[data-size=small] .tk-select-label {
+  font-size: 11px;
+}
 
 .tk-select-viewport {
   display: flex;
@@ -3798,16 +4443,23 @@ body {
 }
 
 .tk-select-label {
-  padding-inline: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-l);
+  padding-inline: var(--spacing-m-base);
   padding-block: 0.25rem;
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
-  font-weight: 500;
-  color: var(--text-sub-base);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  font-weight: 400;
+  color: var(--text-dark);
   user-select: none;
 }
+.tk-select-label::after {
+  content: "";
+  flex: 1 1 auto;
+  height: 1px;
+  background-color: var(--border-light);
+}
 
 .tk-select-separator {
   flex-shrink: 0;
@@ -5139,6 +5791,9 @@ body {
 .tk-checkbox[data-invalid][data-focus][data-checked]:not([data-disabled]) .tk-checkbox-indicator, .tk-checkbox[data-invalid][data-focus][data-indeterminate]:not([data-disabled]) .tk-checkbox-indicator {
   border-color: var(--states-danger-light);
 }
+.tk-checkbox .tk-checkbox-icon svg {
+  flex: none;
+}
 .tk-checkbox[data-size=base] .tk-checkbox-indicator {
   width: 20px;
   height: 20px;
@@ -5149,6 +5804,14 @@ body {
   width: 12px;
   height: 12px;
 }
+.tk-checkbox[data-size=base] .tk-checkbox-icon svg {
+  width: 22px;
+  height: 22px;
+}
+.tk-checkbox[data-size=base][data-indeterminate] .tk-checkbox-icon svg {
+  width: 14px;
+  height: 14px;
+}
 .tk-checkbox[data-size=small] .tk-checkbox-indicator {
   width: 16px;
   height: 16px;
@@ -5159,6 +5822,14 @@ body {
   width: 10px;
   height: 10px;
 }
+.tk-checkbox[data-size=small] .tk-checkbox-icon svg {
+  width: 18px;
+  height: 18px;
+}
+.tk-checkbox[data-size=small][data-indeterminate] .tk-checkbox-icon svg {
+  width: 12px;
+  height: 12px;
+}
 
 .tk-chip {
   font-family: var(--family-body, "tk-text", sans-serif);
@@ -5203,7 +5874,6 @@ body {
   width: 100%;
   height: 100%;
   fill: currentColor;
-  stroke: currentColor;
 }
 .tk-chip .tk-chip-remove {
   appearance: none;
@@ -5219,7 +5889,7 @@ body {
   cursor: pointer;
 }
 .tk-chip[data-size=small] {
-  min-height: 20px;
+  height: 20px;
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
   border-radius: var(--chips-small-radius);
@@ -5235,7 +5905,7 @@ body {
   padding-inline-end: var(--chips-small-v-padding);
 }
 .tk-chip[data-size=base] {
-  min-height: 24px;
+  height: 24px;
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
   border-radius: var(--chips-base-radius);
@@ -5251,7 +5921,7 @@ body {
   padding-inline-end: var(--chips-base-v-padding);
 }
 .tk-chip[data-size=large] {
-  min-height: 28px;
+  height: 28px;
   font-size: var(--desktop-body-m-base-size);
   line-height: var(--desktop-body-m-base-line-height);
   border-radius: var(--chips-large-radius);
@@ -6113,6 +6783,11 @@ body {
   border-bottom: 0;
   border-inline-end: 1px solid var(--background-light);
 }
+.tk-tabs-list[data-type=divided]:not([data-orientation=vertical]) {
+  border-bottom: 0;
+  padding-block-end: 1px;
+  background-image: linear-gradient(to top, var(--border-light) 1px, transparent 1px);
+}
 .tk-tabs-list[data-type=compact] {
   gap: 0;
   border-bottom: 0;
@@ -6250,6 +6925,13 @@ body {
 .tk-tabs-trigger[data-type=divided]:hover:not([data-disabled], :disabled, [aria-disabled=true]):not([data-orientation=vertical]), .tk-tabs-trigger[data-type=divided][data-state=active]:not([data-orientation=vertical]) {
   box-shadow: var(--effect-1-default-base);
 }
+.tk-tabs-trigger[data-type=divided]:not([data-orientation=vertical]) {
+  border-bottom: 1px solid var(--border-light);
+  margin-block-end: -1px;
+}
+.tk-tabs-trigger[data-type=divided][data-state=active]:not([data-orientation=vertical]) {
+  border-bottom-color: var(--static-light);
+}
 .tk-tabs-trigger[data-type=divided]::after {
   display: none;
 }
@@ -7199,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;
 }
@@ -7770,3 +8474,206 @@ body {
   background-color: color-mix(in srgb, var(--static-light) 60%, transparent);
   z-index: 4;
 }
+
+.tk-upload {
+  font-family: var(--family-body, "tk-text", sans-serif);
+  display: flex;
+  flex-direction: column;
+  gap: var(--upload-card-gap);
+  width: 100%;
+  box-sizing: border-box;
+}
+.tk-upload:not([data-disabled]):not([data-readonly]) .tk-upload-dropzone:hover {
+  background: var(--background-lightest);
+}
+.tk-upload:not([data-disabled]) .tk-upload-item:hover {
+  background: var(--background-lightest);
+}
+.tk-upload[data-disabled] .tk-upload-dropzone {
+  --tk-upload-dropzone-mark: var(--icon-sub-base);
+  --tk-upload-dropzone-support: var(--text-sub-base);
+  border-color: var(--border-light);
+  background: var(--background-lightest);
+  color: var(--text-sub-base);
+  cursor: not-allowed;
+}
+.tk-upload[data-invalid] .tk-upload-dropzone {
+  border-color: var(--states-danger-base);
+}
+.tk-upload[data-invalid] .tk-upload-item {
+  border-color: var(--states-danger-sub-base);
+}
+
+.tk-upload-dropzone {
+  --tk-upload-dropzone-mark: var(--primary-base);
+  --tk-upload-dropzone-support: var(--text-base);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--upload-basic-gap);
+  padding: var(--upload-basic-v-padding) var(--upload-basic-h-padding);
+  text-align: center;
+  border: 1px dashed var(--border-sub-base);
+  border-radius: var(--radius-m-base);
+  background: transparent;
+  color: var(--text-darkest);
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+  box-sizing: border-box;
+  cursor: default;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+
+.tk-upload-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-m-base);
+}
+
+.tk-upload-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--upload-card-gap);
+}
+.tk-upload-list::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tk-upload-list::-webkit-scrollbar-track {
+  background: var(--background-lightest);
+  border-radius: 2px;
+}
+.tk-upload-list::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--secondary-sub-base);
+}
+.tk-upload-list::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-dark);
+}
+.tk-upload-list::-webkit-scrollbar-corner {
+  background: var(--background-lightest);
+}
+
+.tk-upload-item {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--upload-card-gap);
+  padding: var(--upload-card-v-padding) var(--upload-card-h-padding);
+  border: 1px solid var(--border-sub-base);
+  border-radius: var(--radius-m-base);
+  background: var(--static-light);
+  box-sizing: border-box;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+.tk-upload-item[data-status=completed] .tk-upload-item-status svg {
+  color: var(--states-success-base);
+}
+.tk-upload-item[data-status=error] .tk-upload-item-status svg {
+  color: var(--states-danger-base);
+}
+
+.tk-upload-item-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--upload-card-content-gap) var(--spacing-m-base);
+}
+.tk-upload-item-content .tk-upload-item-name {
+  flex: 1 1 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+  color: var(--text-darkest);
+}
+.tk-upload-item-content .tk-upload-item-size {
+  font-size: var(--desktop-body-xs-size);
+  font-weight: 300;
+  line-height: var(--desktop-body-xs-line-height);
+  color: var(--text-base);
+}
+.tk-upload-item-content .tk-upload-item-status {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--desktop-body-xs-size);
+  font-weight: 300;
+  line-height: var(--desktop-body-xs-line-height);
+  color: var(--text-base);
+}
+.tk-upload-item-content .tk-upload-item-status svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+.tk-upload-item-content .tk-upload-item-status .tk-spinner {
+  flex-shrink: 0;
+  --tk-spinner-size: 16px;
+}
+.tk-upload-item-content .tk-upload-item-progress {
+  flex-basis: 100%;
+}
+.tk-upload-item-content .tk-upload-item-progress .tk-progress {
+  inline-size: 100%;
+}
+
+.tk-upload-item-preview {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: var(--radius-s);
+  color: var(--text-sub-base);
+  box-sizing: border-box;
+}
+.tk-upload-item-preview .tk-upload-item-preview-image,
+.tk-upload-item-preview img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: var(--background-light);
+}
+.tk-upload-item-preview .tk-upload-item-preview-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.tk-upload-item-preview .tk-upload-item-preview-extension {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--background-light);
+  font-size: var(--desktop-body-xs-size);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.tk-upload-item-actions {
+  margin-inline-start: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+.tk-upload-item-actions:empty {
+  display: none;
+}
+
+.tk-upload-item-action {
+  flex-shrink: 0;
+}