@takeoff-design/tokens 0.2.0 → 0.4.0

package/dist/scss/_components.scss

@@ -1,5 +1,4 @@
 /* @takeoff-design/tokens — auto-generated, do not edit */
-@charset "UTF-8";
 @font-face {
   font-family: "tk-text";
   src: url("../../assets/fonts/tk-font/tk-text/tk-text.woff2") format("woff2"), url("../../assets/fonts/tk-font/tk-text/tk-text.ttf") format("truetype");
@@ -89,6 +88,27 @@ body {
     opacity: 1;
   }
 }
+@keyframes tk-progress-indeterminate-linear {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+@keyframes tk-progress-indeterminate-circular {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes tk-skeleton-shimmer {
+  from {
+    transform: translateX(calc(-1 * var(--tk-skeleton-shimmer-width)));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
 @keyframes tk-spinner-rotate {
   to {
     transform: rotate(360deg);
@@ -189,7 +209,6 @@ body {
   width: 100%;
   height: 100%;
   fill: currentColor;
-  stroke: currentColor;
 }
 .tk-button .tk-button-content-symbol {
   display: inline-flex;
@@ -1544,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);
@@ -1565,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);
@@ -1586,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);
@@ -1607,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);
@@ -1628,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);
@@ -1678,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;
@@ -2593,6 +2622,99 @@ body {
   background: var(--background-lightest);
 }
 
+.tk-divider {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--border-light);
+}
+.tk-divider::before, .tk-divider::after {
+  content: "";
+  flex: 1 1 0%;
+  border-block-start: 1px solid currentColor;
+}
+.tk-divider .tk-divider-label {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-inline: 8px;
+  white-space: nowrap;
+  color: var(--text-base);
+  font-family: var(--family-body, "tk-text", sans-serif);
+  font-size: var(--desktop-body-2xs-size);
+  font-weight: 400;
+  line-height: var(--desktop-body-2xs-line-height);
+}
+.tk-divider[data-align=start]::before, .tk-divider[data-align=end]::after {
+  flex: 0 0 16px;
+}
+.tk-divider[data-orientation=horizontal] {
+  width: 100%;
+  margin-block: 16px;
+}
+.tk-divider[data-orientation=horizontal][data-type=dashed]::before, .tk-divider[data-orientation=horizontal][data-type=dashed]::after {
+  height: 1px;
+  border-block-start: 0;
+  background-image: repeating-linear-gradient(to right, currentColor 0 6px, transparent 6px 10px);
+}
+.tk-divider[data-orientation=horizontal][data-type=dotted]::before, .tk-divider[data-orientation=horizontal][data-type=dotted]::after {
+  height: 2px;
+  border-block-start: 0;
+  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+  background-repeat: repeat-x;
+  background-size: 5px 2px;
+}
+@media (forced-colors: active), print {
+  .tk-divider[data-orientation=horizontal][data-type=dashed]::before, .tk-divider[data-orientation=horizontal][data-type=dashed]::after {
+    height: auto;
+    background-image: none;
+    border-block-start: 1px dashed currentColor;
+  }
+  .tk-divider[data-orientation=horizontal][data-type=dotted]::before, .tk-divider[data-orientation=horizontal][data-type=dotted]::after {
+    height: auto;
+    background-image: none;
+    border-block-start: 1px dotted currentColor;
+  }
+}
+.tk-divider[data-orientation=vertical] {
+  flex-direction: column;
+  align-self: stretch;
+  min-height: 100%;
+  margin-inline: 16px;
+}
+.tk-divider[data-orientation=vertical]::before, .tk-divider[data-orientation=vertical]::after {
+  border-block-start: 0;
+  border-inline-start: 1px solid currentColor;
+}
+.tk-divider[data-orientation=vertical][data-type=dashed]::before, .tk-divider[data-orientation=vertical][data-type=dashed]::after {
+  width: 1px;
+  border-inline-start: 0;
+  background-image: repeating-linear-gradient(to bottom, currentColor 0 6px, transparent 6px 10px);
+}
+.tk-divider[data-orientation=vertical][data-type=dotted]::before, .tk-divider[data-orientation=vertical][data-type=dotted]::after {
+  width: 2px;
+  border-inline-start: 0;
+  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
+  background-repeat: repeat-y;
+  background-size: 2px 5px;
+}
+@media (forced-colors: active), print {
+  .tk-divider[data-orientation=vertical][data-type=dashed]::before, .tk-divider[data-orientation=vertical][data-type=dashed]::after {
+    width: auto;
+    background-image: none;
+    border-inline-start: 1px dashed currentColor;
+  }
+  .tk-divider[data-orientation=vertical][data-type=dotted]::before, .tk-divider[data-orientation=vertical][data-type=dotted]::after {
+    width: auto;
+    background-image: none;
+    border-inline-start: 1px dotted currentColor;
+  }
+}
+.tk-divider[data-orientation=vertical] .tk-divider-label {
+  padding-inline: 0;
+  padding-block: 8px;
+}
+
 .tk-drawer-overlay {
   position: fixed;
   inset: 0;
@@ -2713,18 +2835,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;
@@ -2837,6 +2947,150 @@ body {
   background-color: var(--overlay-black-lightest);
 }
 
+.tk-dropdown-trigger {
+  cursor: pointer;
+}
+.tk-dropdown-trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.tk-dropdown-content {
+  font-family: var(--family-body, "tk-text", sans-serif);
+  z-index: 1600;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  min-width: 8rem;
+  padding: 8px;
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-xl);
+  background-color: var(--static-light);
+  box-shadow: 0 2px 2px -1px var(--shadow-black-alpha-light, rgba(82, 88, 102, 0.04)), 0 6px 12px -2px var(--shadow-black-alpha-light, rgba(82, 88, 102, 0.04)), 0 8px 20px 0 var(--shadow-black-alpha-light, rgba(82, 88, 102, 0.04));
+  outline: none;
+}
+.tk-dropdown-content[data-size=large] {
+  font-size: var(--desktop-body-m-base-size);
+  line-height: var(--desktop-body-m-base-line-height);
+}
+.tk-dropdown-content[data-size=large] .tk-dropdown-item {
+  padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
+  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);
+}
+.tk-dropdown-content[data-size=small] {
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+}
+.tk-dropdown-content[data-size=small] .tk-dropdown-item {
+  padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
+  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;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  max-height: 18rem;
+  overflow-y: auto;
+}
+.tk-dropdown-viewport::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tk-dropdown-viewport::-webkit-scrollbar-track {
+  background: var(--background-lightest);
+  border-radius: 2px;
+}
+.tk-dropdown-viewport::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--secondary-sub-base);
+}
+.tk-dropdown-viewport::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-dark);
+}
+.tk-dropdown-viewport::-webkit-scrollbar-corner {
+  background: var(--background-lightest);
+}
+
+.tk-dropdown-item {
+  display: flex;
+  align-items: center;
+  background-color: var(--static-light);
+  color: var(--text-darkest);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
+  gap: var(--dropdown-items-basic-base-gap);
+  border-radius: var(--dropdown-items-basic-base-radius);
+}
+.tk-dropdown-item[data-highlighted] {
+  background-color: var(--background-lightest);
+}
+.tk-dropdown-item[data-disabled] {
+  color: var(--text-sub-base);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tk-dropdown-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+}
+
+.tk-dropdown-label {
+  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: 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;
+  height: 1px;
+  margin: 0;
+  background-color: var(--background-light);
+}
+
+.tk-dropdown-arrow {
+  display: block;
+  color: var(--static-light);
+  pointer-events: none;
+  overflow: visible;
+}
+.tk-dropdown-arrow .tk-arrow-fill {
+  fill: var(--static-light);
+}
+.tk-dropdown-arrow .tk-arrow-border {
+  fill: var(--border-light);
+}
+
 .tk-field {
   font-family: var(--family-body, "tk-text", sans-serif);
   display: flex;
@@ -2846,18 +3100,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);
@@ -2873,7 +3130,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 {
@@ -2882,8 +3138,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);
@@ -3170,6 +3427,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);
@@ -3219,6 +3479,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);
@@ -3268,6 +3531,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);
@@ -3345,6 +3611,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;
@@ -3355,7 +3622,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);
@@ -3457,12 +3723,10 @@ body {
 
 .tk-select-content {
   font-family: var(--family-body, "tk-text", sans-serif);
-  z-index: 800;
+  z-index: 1600;
   display: flex;
   flex-direction: column;
   min-width: 8rem;
-  max-height: 18rem;
-  overflow-y: auto;
   padding: 8px;
   border: 1px solid var(--border-light);
   border-radius: var(--radius-l-base, 1rem);
@@ -3479,6 +3743,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);
@@ -3492,6 +3760,35 @@ 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;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  max-height: 18rem;
+  overflow-y: auto;
+}
+.tk-select-viewport::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tk-select-viewport::-webkit-scrollbar-track {
+  background: var(--background-lightest);
+  border-radius: 2px;
+}
+.tk-select-viewport::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--secondary-sub-base);
+}
+.tk-select-viewport::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-dark);
+}
+.tk-select-viewport::-webkit-scrollbar-corner {
+  background: var(--background-lightest);
+}
 
 .tk-select-item {
   display: flex;
@@ -3531,16 +3828,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;
@@ -3549,35 +3853,383 @@ body {
   background-color: var(--background-light);
 }
 
-.tk-spinner {
-  --tk-spinner-size: var(--spinner-size-base);
-  --tk-spinner-stroke-width: calc(var(--tk-spinner-size) / 6);
-  --tk-spinner-dot-size: calc(var(--tk-spinner-size) * 0.1875);
-  --tk-spinner-track-color: var(--background-light);
-  --tk-spinner-active-color: var(--background-darkest);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  vertical-align: middle;
+.tk-select-arrow {
+  display: block;
+  pointer-events: none;
+  color: var(--static-light);
+  overflow: visible;
 }
-.tk-spinner .tk-spinner-indicator {
-  box-sizing: border-box;
+.tk-select-arrow .tk-arrow-fill {
+  fill: var(--static-light);
+}
+.tk-select-arrow .tk-arrow-border {
+  fill: var(--border-light);
+}
+
+.tk-skeleton {
+  --tk-skeleton-width: 100%;
+  --tk-skeleton-height: 24px;
+  --tk-skeleton-radius: var(--radius-m-base);
+  --tk-skeleton-color: var(--background-light);
+  --tk-skeleton-shimmer-width: 48px;
+  position: relative;
   display: block;
-  width: var(--tk-spinner-size);
-  height: var(--tk-spinner-size);
+  overflow: hidden;
   flex-shrink: 0;
+  width: var(--tk-skeleton-width);
+  height: var(--tk-skeleton-height);
+  border-radius: var(--tk-skeleton-radius);
+  background-color: var(--tk-skeleton-color);
 }
-.tk-spinner[data-size=small] {
-  --tk-spinner-size: var(--spinner-size-small);
+.tk-skeleton[data-type=circle] {
+  --tk-skeleton-width: var(--tk-skeleton-height);
+  --tk-skeleton-radius: var(--radius-full);
 }
-.tk-spinner[data-size=base] {
-  --tk-spinner-size: var(--spinner-size-base);
+.tk-skeleton .tk-skeleton-shimmer {
+  position: absolute;
+  inset: 0;
+  transform: translateX(calc(-1 * var(--tk-skeleton-shimmer-width)));
+  background: linear-gradient(90deg, var(--skeleton-skeleton-gradient-none) 20%, var(--skeleton-skeleton-gradient) 50%, var(--skeleton-skeleton-gradient-none) 80%);
+  background-repeat: no-repeat;
+  background-size: var(--tk-skeleton-shimmer-width) 100%;
+  animation: tk-skeleton-shimmer 1.2s ease-in-out infinite;
 }
-.tk-spinner[data-size=large] {
-  --tk-spinner-size: var(--spinner-size-large);
+.tk-skeleton[data-animation=none] .tk-skeleton-shimmer {
+  display: none;
 }
-.tk-spinner[data-size=xlarge] {
+@media (prefers-reduced-motion: reduce) {
+  .tk-skeleton .tk-skeleton-shimmer {
+    display: none;
+  }
+}
+
+.tk-slider {
+  box-sizing: border-box;
+  touch-action: none;
+  user-select: none;
+  --tk-slider-rail-size: var(--spacing-s);
+  --tk-slider-thumb-size: var(--spacing-4xl);
+  --tk-slider-tick-length: var(--spacing-m-base);
+  --tk-slider-gap: var(--spacing-m-base);
+  --tk-slider-fill: var(--primary-base);
+  --tk-slider-rail: var(--background-light);
+  --tk-slider-value-size: var(--size-xs);
+  --tk-slider-value-line-height: var(--line-height-xs-normal);
+  --tk-slider-value-color: var(--text-base);
+}
+.tk-slider[data-size=small] {
+  --tk-slider-rail-size: var(--spacing-xs);
+  --tk-slider-thumb-size: var(--spacing-xl);
+  --tk-slider-tick-length: var(--spacing-s);
+  --tk-slider-gap: var(--spacing-s);
+  --tk-slider-value-size: var(--size-xxs);
+  --tk-slider-value-line-height: var(--line-height-xxs-normal);
+}
+.tk-slider[data-size=large] {
+  --tk-slider-rail-size: var(--spacing-m-base);
+  --tk-slider-thumb-size: var(--spacing-5xl);
+  --tk-slider-tick-length: var(--spacing-l);
+  --tk-slider-gap: var(--spacing-l);
+  --tk-slider-value-size: var(--size-sm);
+  --tk-slider-value-line-height: var(--line-height-sm-normal);
+}
+.tk-slider[data-variant=info] {
+  --tk-slider-fill: var(--states-info-base);
+}
+.tk-slider[data-variant=success] {
+  --tk-slider-fill: var(--states-success-base);
+}
+.tk-slider[data-variant=danger] {
+  --tk-slider-fill: var(--states-danger-base);
+}
+.tk-slider[data-variant=warning] {
+  --tk-slider-fill: var(--states-warning-base);
+}
+.tk-slider[data-invalid] {
+  --tk-slider-fill: var(--states-danger-base);
+}
+.tk-slider[data-disabled] {
+  --tk-slider-fill: var(--background-sub-base);
+  --tk-slider-value-color: var(--text-light);
+  cursor: not-allowed;
+}
+.tk-slider {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--tk-slider-gap);
+  width: 100%;
+}
+.tk-slider[data-orientation=vertical] {
+  flex-direction: row;
+  column-gap: var(--tk-slider-gap);
+  width: auto;
+  height: 100%;
+}
+
+.tk-slider-track {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--tk-slider-rail-size);
+  background: var(--tk-slider-rail);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+}
+[data-orientation=vertical] .tk-slider-track {
+  width: var(--tk-slider-rail-size);
+  height: 100%;
+}
+[data-disabled] .tk-slider-track {
+  cursor: inherit;
+}
+[data-readonly] .tk-slider-track {
+  cursor: default;
+}
+[data-track=inverted] .tk-slider-track {
+  background: var(--tk-slider-fill);
+}
+
+.tk-slider-range {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: var(--tk-slider-fill);
+  border-radius: inherit;
+}
+[data-orientation=vertical] .tk-slider-range {
+  top: auto;
+  left: 0;
+  width: 100%;
+}
+.tk-slider-range {
+  transition: inset-inline-start 0.15s ease-in-out, inset-block-end 0.15s ease-in-out, width 0.15s ease-in-out, height 0.15s ease-in-out;
+}
+[data-dragging] ~ .tk-slider-range, .tk-slider-range:has(~ [data-dragging]) {
+  transition: none;
+}
+[data-track=none] .tk-slider-range {
+  display: none;
+}
+[data-track=inverted] .tk-slider-range {
+  background: var(--tk-slider-rail);
+}
+
+.tk-slider-thumb {
+  position: absolute;
+  top: 50%;
+  box-sizing: border-box;
+  width: var(--tk-slider-thumb-size);
+  height: var(--tk-slider-thumb-size);
+  transform: translate(-50%, -50%);
+  background: var(--tk-slider-fill);
+  border: 1px solid var(--static-light);
+  border-radius: var(--radius-full);
+  box-shadow: var(--effect-1-default-base);
+  cursor: grab;
+  touch-action: none;
+}
+.tk-slider-thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--tk-slider-thumb-size) / 2);
+  height: calc(var(--tk-slider-thumb-size) / 2);
+  transform: translate(-50%, -50%);
+  background: var(--static-light);
+  border-radius: var(--radius-full);
+}
+[data-orientation=vertical] .tk-slider-thumb {
+  top: auto;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+.tk-slider-thumb {
+  transition: inset-inline-start 0.15s ease-in-out, inset-block-end 0.15s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+.tk-slider-thumb[data-dragging] {
+  cursor: grabbing;
+  transition: box-shadow 0.2s ease-in-out;
+}
+.tk-slider-thumb[data-focus] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--effect-1-default-base), var(--primary-focus);
+}
+[data-disabled] .tk-slider-thumb {
+  cursor: inherit;
+  box-shadow: none;
+}
+[data-readonly] .tk-slider-thumb {
+  cursor: default;
+}
+.tk-slider-thumb[data-disabled] {
+  cursor: not-allowed;
+  background: var(--background-sub-base);
+  box-shadow: none;
+}
+
+.tk-slider-tooltip {
+  position: absolute;
+  bottom: calc(100% + var(--spacing-l));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--tooltips-base-v-padding, 8px) var(--tooltips-base-h-padding, 12px);
+  --tk-slider-tooltip-bg: var(--background-darkest);
+  background: var(--tk-slider-tooltip-bg);
+  color: var(--text-light);
+  border: 1px solid var(--border-dark);
+  border-radius: var(--tooltips-base-radius, 8px);
+  font-family: var(--family-body, "tk-text", sans-serif);
+  font-size: var(--desktop-body-s-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--desktop-body-s-line-height);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2100;
+  box-shadow: 0 2px 2px -1px var(--shadow-black-alpha-light), 0 6px 12px -2px var(--shadow-black-alpha-light), 0 8px 20px 0 var(--shadow-black-alpha-light);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
+}
+[data-orientation=vertical] .tk-slider-tooltip {
+  bottom: auto;
+  top: 50%;
+  left: calc(100% + var(--spacing-l));
+  transform: translateY(-50%);
+}
+[data-dragging] > .tk-slider-tooltip, [data-focus] > .tk-slider-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+[data-tooltip=always] .tk-slider-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+[data-tooltip=never] .tk-slider-tooltip {
+  opacity: 0;
+  visibility: hidden;
+}
+[data-disabled] .tk-slider-tooltip {
+  display: none;
+}
+
+.tk-slider-arrow {
+  --tk-slider-arrow-width: 4px;
+  --tk-slider-arrow-height: 6px;
+  --tk-slider-arrow-color: var(--tk-slider-tooltip-bg, var(--background-darkest));
+  --tk-slider-arrow-border-color: var(--border-dark);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-top: -1px;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  border-left: calc(var(--tk-slider-arrow-width) + 1px) solid transparent;
+  border-right: calc(var(--tk-slider-arrow-width) + 1px) solid transparent;
+  border-top: calc(var(--tk-slider-arrow-height) + 1px) solid var(--tk-slider-arrow-border-color);
+  transform: translateX(-50%);
+}
+.tk-slider-arrow::before {
+  content: "";
+  position: absolute;
+  top: calc(-1 * (var(--tk-slider-arrow-height) + 1px));
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-left: var(--tk-slider-arrow-width) solid transparent;
+  border-right: var(--tk-slider-arrow-width) solid transparent;
+  border-top: var(--tk-slider-arrow-height) solid var(--tk-slider-arrow-color);
+  transform: translateX(-50%);
+}
+[data-orientation=vertical] .tk-slider-arrow {
+  top: 50%;
+  left: auto;
+  right: 100%;
+  margin-top: 0;
+  margin-right: -1px;
+  border-top: calc(var(--tk-slider-arrow-width) + 1px) solid transparent;
+  border-bottom: calc(var(--tk-slider-arrow-width) + 1px) solid transparent;
+  border-right: calc(var(--tk-slider-arrow-height) + 1px) solid var(--tk-slider-arrow-border-color);
+  border-left: 0;
+  transform: translateY(-50%);
+}
+[data-orientation=vertical] .tk-slider-arrow::before {
+  top: 50%;
+  left: 1px;
+  right: auto;
+  border-top: var(--tk-slider-arrow-width) solid transparent;
+  border-bottom: var(--tk-slider-arrow-width) solid transparent;
+  border-right: var(--tk-slider-arrow-height) solid var(--tk-slider-arrow-color);
+  border-left: 0;
+  transform: translateY(-50%);
+}
+
+.tk-slider-ticks {
+  position: relative;
+  width: 100%;
+  height: var(--tk-slider-tick-length);
+}
+[data-orientation=vertical] .tk-slider-ticks {
+  width: var(--tk-slider-tick-length);
+  height: 100%;
+}
+
+.tk-slider-tick {
+  position: absolute;
+  top: 0;
+  width: var(--spacing-xxs);
+  height: 100%;
+  transform: translateX(-50%);
+  background: var(--background-sub-base);
+}
+[data-orientation=vertical] .tk-slider-tick {
+  top: auto;
+  left: 0;
+  width: 100%;
+  height: var(--spacing-xxs);
+  transform: translateY(50%);
+}
+
+.tk-slider-value {
+  color: var(--tk-slider-value-color);
+  font-size: var(--tk-slider-value-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--tk-slider-value-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+.tk-spinner {
+  --tk-spinner-size: var(--spinner-size-base);
+  --tk-spinner-stroke-width: calc(var(--tk-spinner-size) / 6);
+  --tk-spinner-dot-size: calc(var(--tk-spinner-size) * 0.1875);
+  --tk-spinner-track-color: var(--background-light);
+  --tk-spinner-active-color: var(--background-darkest);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.tk-spinner .tk-spinner-indicator {
+  box-sizing: border-box;
+  display: block;
+  width: var(--tk-spinner-size);
+  height: var(--tk-spinner-size);
+  flex-shrink: 0;
+}
+.tk-spinner[data-size=small] {
+  --tk-spinner-size: var(--spinner-size-small);
+}
+.tk-spinner[data-size=base] {
+  --tk-spinner-size: var(--spinner-size-base);
+}
+.tk-spinner[data-size=large] {
+  --tk-spinner-size: var(--spinner-size-large);
+}
+.tk-spinner[data-size=xlarge] {
   --tk-spinner-size: var(--spinner-size-xlarge);
 }
 .tk-spinner[data-variant=primary] {
@@ -3689,75 +4341,746 @@ body {
   transform: translate(-50%, -50%) rotate(90deg);
   animation-delay: -0.9s;
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(4), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(4) {
-  top: 85%;
-  left: 85%;
-  transform: translate(-50%, -50%) rotate(135deg);
-  animation-delay: -0.8s;
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(4), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(4) {
+  top: 85%;
+  left: 85%;
+  transform: translate(-50%, -50%) rotate(135deg);
+  animation-delay: -0.8s;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(5), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(5) {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(180deg);
+  animation-delay: -0.7s;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(6), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(6) {
+  top: 85%;
+  left: 14%;
+  transform: translate(-50%, -50%) rotate(225deg);
+  animation-delay: -0.6s;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(7), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(7) {
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%) rotate(270deg);
+  animation-delay: -0.5s;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(8), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(8) {
+  top: 14%;
+  left: 14%;
+  transform: translate(-50%, -50%) rotate(315deg);
+  animation-delay: -0.4s;
+}
+.tk-spinner[data-type=threeDots] .tk-spinner-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot {
+  width: var(--tk-spinner-dot-size);
+  height: var(--tk-spinner-dot-size);
+  margin: 1px;
+  background-color: var(--tk-spinner-active-color);
+  border-radius: var(--radius-full);
+  animation: tk-spinner-three-dots 1.2s infinite ease-in-out;
+}
+.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(3) {
+  animation-delay: -0.15s;
+}
+.tk-spinner[data-type=logo] .tk-spinner-indicator {
+  animation: tk-spinner-rotate 1s steps(4) infinite;
+}
+.tk-spinner[data-type=logo] .tk-spinner-indicator svg {
+  display: block;
+  width: var(--tk-spinner-size);
+  height: var(--tk-spinner-size);
+  fill: var(--tk-spinner-active-color);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tk-spinner .tk-spinner-indicator {
+    animation-duration: 1.6s;
+  }
+  .tk-spinner .tk-spinner-indicator .tk-spinner-dot,
+  .tk-spinner .tk-spinner-indicator .tk-spinner-line {
+    animation-duration: 1.6s;
+  }
+}
+
+.tk-progress {
+  box-sizing: border-box;
+  --tk-progress-linear-size: var(--spacing-s);
+  --tk-progress-linear-value-size: var(--size-xxs);
+  --tk-progress-linear-value-line-height: var(--line-height-xxs-normal);
+  --tk-progress-circular-size: var(--spacing-24xl);
+  --tk-progress-circular-stroke-width: 2.5;
+  --tk-progress-circular-value-size: var(--size-3xl);
+  --tk-progress-circular-value-line-height: var(--line-height-2xl-normal);
+  --tk-progress-fill: var(--primary-base);
+  --tk-progress-circular-value-color: var(--primary-base);
+}
+.tk-progress[data-size=small] {
+  --tk-progress-linear-size: var(--spacing-xs);
+  --tk-progress-linear-value-size: var(--size-xxs);
+  --tk-progress-linear-value-line-height: var(--line-height-xxs-normal);
+  --tk-progress-circular-size: var(--spacing-16xl);
+  --tk-progress-circular-value-size: var(--size-base);
+  --tk-progress-circular-value-line-height: var(--line-height-base-normal);
+}
+.tk-progress[data-size=base] {
+  --tk-progress-linear-size: var(--spacing-s);
+  --tk-progress-linear-value-size: var(--size-xs);
+  --tk-progress-linear-value-line-height: var(--line-height-xs-normal);
+  --tk-progress-circular-size: var(--spacing-24xl);
+  --tk-progress-circular-value-size: var(--size-2xl);
+  --tk-progress-circular-value-line-height: var(--line-height-2xl-normal);
+}
+.tk-progress[data-size=large] {
+  --tk-progress-linear-size: var(--spacing-m-base);
+  --tk-progress-linear-value-size: var(--size-sm);
+  --tk-progress-linear-value-line-height: var(--line-height-sm-normal);
+  --tk-progress-circular-size: var(--spacing-32xl);
+  --tk-progress-circular-value-size: var(--size-4xl);
+  --tk-progress-circular-value-line-height: var(--line-height-4xl-normal);
+}
+.tk-progress[data-variant=info] {
+  --tk-progress-fill: var(--states-info-base);
+}
+.tk-progress[data-variant=success] {
+  --tk-progress-fill: var(--states-success-base);
+}
+.tk-progress[data-variant=danger] {
+  --tk-progress-fill: var(--states-danger-base);
+}
+.tk-progress[data-variant=warning] {
+  --tk-progress-fill: var(--states-warning-base);
+}
+.tk-progress[data-disabled] {
+  --tk-progress-fill: var(--background-dark);
+  --tk-progress-circular-value-color: var(--text-base);
+}
+.tk-progress[data-type=linear] {
+  display: flex;
+  flex-direction: column;
+  row-gap: 6px;
+  width: 100%;
+}
+.tk-progress[data-type=circular] {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.tk-progress-track {
+  box-sizing: border-box;
+}
+.tk-progress-track[data-type=linear] {
+  width: 100%;
+  height: var(--tk-progress-linear-size);
+  border-radius: var(--radius-full);
+  background-color: var(--background-light);
+  overflow: hidden;
+}
+.tk-progress-track[data-type=circular] {
+  display: block;
+  width: var(--tk-progress-circular-size);
+  height: var(--tk-progress-circular-size);
+  transform: rotate(-90deg);
+}
+.tk-progress-track[data-type=circular] .tk-progress-rail {
+  fill: none;
+  stroke: var(--background-light);
+  stroke-width: var(--tk-progress-circular-stroke-width);
+}
+
+.tk-progress-indicator[data-type=linear] {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--tk-progress-fill);
+  transition: width 0.3s ease-in-out;
+}
+.tk-progress-indicator[data-type=linear][data-indeterminate] {
+  width: 40%;
+  animation: tk-progress-indeterminate-linear 1.5s ease-in-out infinite;
+}
+.tk-progress-indicator[data-type=circular] {
+  fill: none;
+  stroke: var(--tk-progress-fill);
+  stroke-width: var(--tk-progress-circular-stroke-width);
+  stroke-linecap: round;
+  stroke-dasharray: 100;
+  transition: stroke-dashoffset 0.3s ease-in-out;
+}
+.tk-progress-indicator[data-type=circular][data-indeterminate] {
+  stroke-dashoffset: 75;
+  transform-origin: center;
+  animation: tk-progress-indeterminate-circular 1s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tk-progress-indicator[data-type=linear], .tk-progress-indicator[data-type=circular] {
+    transition: none;
+  }
+  .tk-progress-indicator[data-type=linear][data-indeterminate] {
+    animation-duration: 3s;
+  }
+  .tk-progress-indicator[data-type=circular][data-indeterminate] {
+    animation-duration: 1.6s;
+  }
+}
+
+.tk-progress-value[data-type=linear] {
+  font-size: var(--tk-progress-linear-value-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--tk-progress-linear-value-line-height);
+  color: var(--text-base);
+}
+.tk-progress-value[data-type=circular] {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+  font-size: var(--tk-progress-circular-value-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--tk-progress-circular-value-line-height);
+  color: var(--tk-progress-circular-value-color);
+}
+
+.tk-stepper {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+  font-family: var(--family-body);
+  text-align: initial;
+}
+.tk-stepper .tk-stepper-item {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  overflow: visible;
+  margin: 0;
+}
+.tk-stepper .tk-stepper-item:last-child {
+  flex: none;
+}
+.tk-stepper .tk-stepper-item:last-child .tk-stepper-rail {
+  display: none;
+}
+.tk-stepper .tk-stepper-trigger {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+  text-align: start;
+  display: block;
+  padding: 0;
+  width: max-content;
+  max-width: 100%;
+  border-radius: var(--radius-xs);
+}
+.tk-stepper .tk-stepper-trigger:focus-visible {
+  outline: none;
+}
+.tk-stepper .tk-stepper-trigger:focus-visible .tk-stepper-indicator {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--primary-focus);
+}
+.tk-stepper .tk-stepper-item[data-clickable] .tk-stepper-trigger {
+  cursor: pointer;
+}
+.tk-stepper .tk-stepper-item[data-clickable]:not([data-error]) .tk-stepper-trigger:hover .tk-stepper-title {
+  color: var(--text-darkest);
+}
+.tk-stepper .tk-stepper-item[data-disabled] .tk-stepper-trigger {
+  cursor: not-allowed;
+}
+.tk-stepper .tk-stepper-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border: 2px solid var(--border-light);
+  background-color: var(--static-light);
+  color: var(--border-light);
+  border-radius: var(--radius-full);
+  font-family: var(--family-body);
+  text-align: center;
+  margin-inline-end: 8px;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+.tk-stepper .tk-stepper-indicator:empty::before {
+  content: "";
+  display: block;
+  border-radius: var(--radius-full);
+  background-color: currentColor;
+}
+.tk-stepper .tk-stepper-indicator > svg,
+.tk-stepper .tk-stepper-indicator > img {
+  flex-shrink: 0;
+}
+.tk-stepper .tk-stepper-rail {
+  position: absolute;
+}
+.tk-stepper .tk-stepper-rail::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: background-color 0.2s ease-in-out;
+  background-color: var(--border-light);
+  border-radius: var(--radius-full);
+}
+.tk-stepper .tk-stepper-content {
+  display: flex;
+  flex-direction: column;
+}
+.tk-stepper .tk-stepper-title {
+  display: block;
+  color: var(--text-dark);
+  font-family: var(--family-body);
+  font-weight: var(--weight-medium);
+  transition: color 0.2s ease-in-out;
+}
+.tk-stepper .tk-stepper-description {
+  display: block;
+  color: var(--text-base);
+  font-family: var(--family-body);
+  font-weight: var(--weight-regular);
+}
+.tk-stepper .tk-stepper-item[data-state=active] .tk-stepper-indicator {
+  border-color: var(--primary-base);
+  background-color: var(--primary-base);
+  color: var(--static-light);
+}
+.tk-stepper .tk-stepper-item[data-state=active] .tk-stepper-title {
+  color: var(--text-darkest);
+}
+.tk-stepper .tk-stepper-item[data-state=completed]:not([data-error]):not([data-disabled]) .tk-stepper-indicator {
+  border-color: var(--primary-base);
+  color: var(--primary-base);
+}
+.tk-stepper .tk-stepper-item[data-state=completed]:not([data-error]):not([data-disabled]) .tk-stepper-rail::after {
+  background-color: var(--primary-base);
+}
+.tk-stepper .tk-stepper-item[data-error] .tk-stepper-indicator {
+  border-color: var(--states-danger-base);
+  background-color: var(--states-danger-base);
+  color: var(--static-light);
+}
+.tk-stepper .tk-stepper-item[data-error] .tk-stepper-title {
+  color: var(--states-danger-base);
+}
+.tk-stepper .tk-stepper-item[data-disabled] .tk-stepper-indicator {
+  border-color: var(--background-light);
+  background-color: var(--background-light);
+  color: var(--background-sub-base);
+}
+.tk-stepper .tk-stepper-item[data-disabled] .tk-stepper-title,
+.tk-stepper .tk-stepper-item[data-disabled] .tk-stepper-description {
+  color: var(--text-sub-base);
+}
+.tk-stepper[data-orientation=horizontal] {
+  overflow-x: auto;
+  padding-block: 4px;
+}
+.tk-stepper[data-orientation=horizontal]::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tk-stepper[data-orientation=horizontal]::-webkit-scrollbar-track {
+  background: var(--background-lightest);
+  border-radius: 2px;
+}
+.tk-stepper[data-orientation=horizontal]::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--secondary-sub-base);
+}
+.tk-stepper[data-orientation=horizontal]::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-dark);
+}
+.tk-stepper[data-orientation=horizontal]::-webkit-scrollbar-corner {
+  background: var(--background-lightest);
+}
+.tk-stepper[data-orientation=horizontal] .tk-stepper-item {
+  flex: 1;
+}
+.tk-stepper[data-orientation=horizontal] .tk-stepper-item:last-child {
+  flex: none;
+}
+.tk-stepper[data-orientation=horizontal] .tk-stepper-indicator {
+  margin-inline-start: 40px;
+}
+.tk-stepper[data-orientation=horizontal] .tk-stepper-rail {
+  height: 2px;
+}
+.tk-stepper[data-orientation=horizontal] .tk-stepper-content {
+  text-align: center;
+  align-items: center;
+}
+.tk-stepper[data-orientation=horizontal][data-reverse] {
+  align-items: flex-end;
+}
+.tk-stepper[data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  position: relative;
+}
+.tk-stepper[data-orientation=horizontal][data-reverse] .tk-stepper-rail {
+  top: auto;
+}
+.tk-stepper[data-orientation=horizontal][data-reverse] .tk-stepper-indicator {
+  position: absolute;
+  bottom: 0;
+}
+.tk-stepper[data-orientation=vertical] {
+  flex-direction: column;
+}
+.tk-stepper[data-orientation=vertical] .tk-stepper-trigger {
+  display: flex;
+  flex-direction: row;
+}
+.tk-stepper[data-orientation=vertical] .tk-stepper-rail {
+  top: 0;
+  width: 2px;
+}
+.tk-stepper[data-orientation=vertical][data-reverse] {
+  align-items: flex-end;
+}
+.tk-stepper[data-orientation=vertical][data-reverse] .tk-stepper-trigger {
+  flex-direction: row-reverse;
+}
+.tk-stepper[data-orientation=vertical][data-reverse] .tk-stepper-indicator {
+  margin-inline-end: 0;
+  margin-inline-start: 8px;
+}
+.tk-stepper[data-orientation=vertical][data-reverse] .tk-stepper-content {
+  text-align: right;
+  align-items: flex-end;
+}
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator {
+  width: 16px;
+  height: 16px;
+  font-size: var(--desktop-body-2xs-size);
+  line-height: var(--desktop-body-2xs-line-height);
+}
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator:empty::before {
+  width: 6px;
+  height: 6px;
+}
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator > svg,
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator > img {
+  width: 16px;
+  height: 16px;
+}
+.tk-stepper[data-size=xsmall] .tk-stepper-title {
+  font-size: var(--desktop-body-2xs-size);
+  line-height: var(--desktop-body-2xs-line-height);
+}
+.tk-stepper[data-size=xsmall] .tk-stepper-description {
+  font-size: 10px;
+  line-height: 14px;
+}
+.tk-stepper[data-size=xsmall][data-orientation=horizontal] .tk-stepper-content {
+  width: 96px;
+  margin-top: 0;
+}
+.tk-stepper[data-size=xsmall][data-orientation=horizontal] .tk-stepper-rail {
+  top: 7px;
+  width: calc(100% - 16px - 2 * var(--stepper-items-rail-gap));
+  left: calc(56px + var(--stepper-items-rail-gap));
+}
+.tk-stepper[data-size=xsmall][data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  padding-bottom: 16px;
+}
+.tk-stepper[data-size=xsmall][data-orientation=horizontal][data-reverse] .tk-stepper-rail {
+  top: auto;
+  bottom: 7px;
+}
+.tk-stepper[data-size=xsmall][data-orientation=vertical] .tk-stepper-item {
+  min-height: 50px;
+}
+.tk-stepper[data-size=xsmall][data-orientation=vertical] .tk-stepper-rail {
+  height: calc(100% - 16px - 2 * var(--stepper-items-rail-gap));
+  top: calc(16px + var(--stepper-items-rail-gap));
+  left: 7px;
+}
+.tk-stepper[data-size=xsmall][data-orientation=vertical][data-reverse] .tk-stepper-rail {
+  right: 7px;
+  left: unset;
+}
+.tk-stepper[data-size=small] .tk-stepper-indicator {
+  width: 24px;
+  height: 24px;
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+}
+.tk-stepper[data-size=small] .tk-stepper-indicator:empty::before {
+  width: 9px;
+  height: 9px;
+}
+.tk-stepper[data-size=small] .tk-stepper-indicator > svg,
+.tk-stepper[data-size=small] .tk-stepper-indicator > img {
+  width: 24px;
+  height: 24px;
+}
+.tk-stepper[data-size=small] .tk-stepper-title {
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+}
+.tk-stepper[data-size=small] .tk-stepper-description {
+  font-size: var(--desktop-body-2xs-size);
+  line-height: var(--desktop-body-2xs-line-height);
+}
+.tk-stepper[data-size=small][data-orientation=horizontal] .tk-stepper-content {
+  width: 104px;
+  margin-top: 2px;
+}
+.tk-stepper[data-size=small][data-orientation=horizontal] .tk-stepper-rail {
+  top: 11px;
+  width: calc(100% - 24px - 2 * var(--stepper-items-rail-gap));
+  left: calc(64px + var(--stepper-items-rail-gap));
+}
+.tk-stepper[data-size=small][data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  padding-bottom: 24px;
+}
+.tk-stepper[data-size=small][data-orientation=horizontal][data-reverse] .tk-stepper-rail {
+  top: auto;
+  bottom: 11px;
+}
+.tk-stepper[data-size=small][data-orientation=horizontal][data-reverse] .tk-stepper-content {
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+.tk-stepper[data-size=small][data-orientation=vertical] .tk-stepper-item {
+  min-height: 75px;
+}
+.tk-stepper[data-size=small][data-orientation=vertical] .tk-stepper-rail {
+  height: calc(100% - 24px - 2 * var(--stepper-items-rail-gap));
+  top: calc(24px + var(--stepper-items-rail-gap));
+  left: 11px;
+}
+.tk-stepper[data-size=small][data-orientation=vertical][data-reverse] .tk-stepper-rail {
+  right: 11px;
+  left: unset;
+}
+.tk-stepper[data-size=base] .tk-stepper-indicator {
+  width: 32px;
+  height: 32px;
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
+.tk-stepper[data-size=base] .tk-stepper-indicator:empty::before {
+  width: 12px;
+  height: 12px;
+}
+.tk-stepper[data-size=base] .tk-stepper-indicator > svg,
+.tk-stepper[data-size=base] .tk-stepper-indicator > img {
+  width: 32px;
+  height: 32px;
+}
+.tk-stepper[data-size=base] .tk-stepper-title {
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
+.tk-stepper[data-size=base] .tk-stepper-description {
+  font-size: var(--desktop-body-xs-size);
+  line-height: var(--desktop-body-xs-line-height);
+}
+.tk-stepper[data-size=base][data-orientation=horizontal] .tk-stepper-content {
+  width: 112px;
+  margin-top: 4px;
+}
+.tk-stepper[data-size=base][data-orientation=horizontal] .tk-stepper-rail {
+  top: 15px;
+  left: calc(72px + var(--stepper-items-rail-gap));
+  width: calc(100% - 32px - 2 * var(--stepper-items-rail-gap));
+}
+.tk-stepper[data-size=base][data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  padding-bottom: 32px;
+}
+.tk-stepper[data-size=base][data-orientation=horizontal][data-reverse] .tk-stepper-rail {
+  top: auto;
+  bottom: 15px;
+}
+.tk-stepper[data-size=base][data-orientation=horizontal][data-reverse] .tk-stepper-content {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.tk-stepper[data-size=base][data-orientation=vertical] .tk-stepper-item {
+  min-height: 90px;
+}
+.tk-stepper[data-size=base][data-orientation=vertical] .tk-stepper-rail {
+  height: calc(100% - 32px - 2 * var(--stepper-items-rail-gap));
+  top: calc(32px + var(--stepper-items-rail-gap));
+  left: 15px;
+}
+.tk-stepper[data-size=base][data-orientation=vertical][data-reverse] .tk-stepper-rail {
+  right: 15px;
+  left: unset;
+}
+.tk-stepper[data-size=large] .tk-stepper-indicator {
+  width: 40px;
+  height: 40px;
+  font-size: var(--desktop-body-m-base-size);
+  line-height: var(--desktop-body-m-base-line-height);
+}
+.tk-stepper[data-size=large] .tk-stepper-indicator:empty::before {
+  width: 15px;
+  height: 15px;
+}
+.tk-stepper[data-size=large] .tk-stepper-indicator > svg,
+.tk-stepper[data-size=large] .tk-stepper-indicator > img {
+  width: 40px;
+  height: 40px;
+}
+.tk-stepper[data-size=large] .tk-stepper-title {
+  font-size: var(--desktop-body-m-base-size);
+  line-height: var(--desktop-body-m-base-line-height);
+}
+.tk-stepper[data-size=large] .tk-stepper-description {
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
+.tk-stepper[data-size=large][data-orientation=horizontal] .tk-stepper-content {
+  width: 120px;
+  margin-top: 6px;
+}
+.tk-stepper[data-size=large][data-orientation=horizontal] .tk-stepper-rail {
+  top: 19px;
+  width: calc(100% - 40px - 2 * var(--stepper-items-rail-gap));
+  left: calc(80px + var(--stepper-items-rail-gap));
+}
+.tk-stepper[data-size=large][data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  padding-bottom: 40px;
+}
+.tk-stepper[data-size=large][data-orientation=horizontal][data-reverse] .tk-stepper-rail {
+  top: auto;
+  bottom: 19px;
+}
+.tk-stepper[data-size=large][data-orientation=horizontal][data-reverse] .tk-stepper-content {
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+.tk-stepper[data-size=large][data-orientation=vertical] .tk-stepper-item {
+  min-height: 110px;
+}
+.tk-stepper[data-size=large][data-orientation=vertical] .tk-stepper-rail {
+  height: calc(100% - 40px - 2 * var(--stepper-items-rail-gap));
+  top: calc(40px + var(--stepper-items-rail-gap));
+  left: 19px;
+}
+.tk-stepper[data-size=large][data-orientation=vertical][data-reverse] .tk-stepper-rail {
+  right: 19px;
+  left: unset;
+}
+.tk-stepper[data-mode=compact] {
+  gap: var(--stepper-segment-gap);
+}
+.tk-stepper[data-mode=compact] .tk-stepper-trigger {
+  border-radius: 0;
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-item,
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-item:last-child {
+  flex: 1;
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-trigger {
+  display: flex;
+  width: 100%;
+  gap: var(--stepper-segment-gap);
+  border-top: 2px solid var(--border-light);
+  transition: border-top-color 0.2s ease-in-out;
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-item[data-state=active] .tk-stepper-trigger,
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-item[data-state=completed]:not([data-error]):not([data-disabled]) .tk-stepper-trigger {
+  border-top-color: var(--primary-base);
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-top-color: var(--states-danger-base);
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-indicator {
+  margin: 4px 0 0 0;
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-content {
+  align-items: flex-start;
+  text-align: start;
+  width: auto;
+  min-height: 0;
+  margin: 4px 0 0 0;
+}
+.tk-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  border: 0;
+  border-bottom: 2px solid var(--border-light);
+  padding-bottom: 0;
+  transition: border-bottom-color 0.2s ease-in-out;
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(5), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(5) {
-  top: 100%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(180deg);
-  animation-delay: -0.7s;
+.tk-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-item[data-state=active] .tk-stepper-trigger,
+.tk-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-item[data-state=completed]:not([data-error]):not([data-disabled]) .tk-stepper-trigger {
+  border-bottom-color: var(--primary-base);
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(6), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(6) {
-  top: 85%;
-  left: 14%;
-  transform: translate(-50%, -50%) rotate(225deg);
-  animation-delay: -0.6s;
+.tk-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-bottom-color: var(--states-danger-base);
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(7), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(7) {
-  top: 50%;
-  left: 0;
-  transform: translate(-50%, -50%) rotate(270deg);
-  animation-delay: -0.5s;
+.tk-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-indicator {
+  margin: 0 0 4px 0;
+  position: static;
+  align-self: flex-end;
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(8), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(8) {
-  top: 14%;
-  left: 14%;
-  transform: translate(-50%, -50%) rotate(315deg);
-  animation-delay: -0.4s;
+.tk-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-content {
+  margin: 0 0 4px 0;
 }
-.tk-spinner[data-type=threeDots] .tk-spinner-indicator {
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-trigger {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 100%;
+  gap: var(--stepper-segment-gap);
+  border-left: 2px solid var(--border-light);
+  transition: border-left-color 0.2s ease-in-out;
 }
-.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot {
-  width: var(--tk-spinner-dot-size);
-  height: var(--tk-spinner-dot-size);
-  margin: 1px;
-  background-color: var(--tk-spinner-active-color);
-  border-radius: var(--radius-full);
-  animation: tk-spinner-three-dots 1.2s infinite ease-in-out;
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-item[data-state=active] .tk-stepper-trigger,
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-item[data-state=completed]:not([data-error]):not([data-disabled]) .tk-stepper-trigger {
+  border-left-color: var(--primary-base);
 }
-.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(1) {
-  animation-delay: -0.45s;
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-left-color: var(--states-danger-base);
 }
-.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(2) {
-  animation-delay: -0.3s;
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-indicator {
+  margin: 0 0 0 4px;
 }
-.tk-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(3) {
-  animation-delay: -0.15s;
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-content {
+  margin-left: 4px;
+  min-height: 0;
 }
-.tk-spinner[data-type=logo] .tk-spinner-indicator {
-  animation: tk-spinner-rotate 1s steps(4) infinite;
+.tk-stepper[data-mode=compact][data-orientation=vertical][data-reverse] .tk-stepper-trigger {
+  border: 0;
+  border-right: 2px solid var(--border-light);
+  transition: border-right-color 0.2s ease-in-out;
 }
-.tk-spinner[data-type=logo] .tk-spinner-indicator svg {
-  display: block;
-  width: var(--tk-spinner-size);
-  height: var(--tk-spinner-size);
-  fill: var(--tk-spinner-active-color);
+.tk-stepper[data-mode=compact][data-orientation=vertical][data-reverse] .tk-stepper-item[data-state=active] .tk-stepper-trigger,
+.tk-stepper[data-mode=compact][data-orientation=vertical][data-reverse] .tk-stepper-item[data-state=completed]:not([data-error]):not([data-disabled]) .tk-stepper-trigger {
+  border-right-color: var(--primary-base);
 }
-@media (prefers-reduced-motion: reduce) {
-  .tk-spinner .tk-spinner-indicator {
-    animation-duration: 1.6s;
-  }
-  .tk-spinner .tk-spinner-indicator .tk-spinner-dot,
-  .tk-spinner .tk-spinner-indicator .tk-spinner-line {
-    animation-duration: 1.6s;
-  }
+.tk-stepper[data-mode=compact][data-orientation=vertical][data-reverse] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-right-color: var(--states-danger-base);
+}
+.tk-stepper[data-mode=compact][data-orientation=vertical][data-reverse] .tk-stepper-indicator {
+  margin: 0 4px 0 0;
+  align-self: flex-start;
+}
+.tk-stepper[data-mode=compact][data-orientation=vertical][data-reverse] .tk-stepper-content {
+  margin: 0;
 }
 
 .tk-checkbox {
@@ -3853,6 +5176,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;
@@ -3863,6 +5189,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;
@@ -3873,6 +5207,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);
@@ -3917,7 +5259,6 @@ body {
   width: 100%;
   height: 100%;
   fill: currentColor;
-  stroke: currentColor;
 }
 .tk-chip .tk-chip-remove {
   appearance: none;
@@ -3933,7 +5274,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);
@@ -3949,7 +5290,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);
@@ -3965,7 +5306,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);
@@ -4827,6 +6168,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;
@@ -4964,6 +6310,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;
 }
@@ -5055,7 +6408,7 @@ body {
   font-size: var(--desktop-body-xs-size);
   font-weight: 300;
   line-height: var(--desktop-body-xs-line-height);
-  z-index: 1300;
+  z-index: 2100;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -5083,50 +6436,71 @@ body {
 .tk-tooltip-content[data-variant=dark] .tk-tooltip-header {
   color: var(--text-lightest);
 }
-.tk-tooltip-content[data-variant=dark] .tk-tooltip-arrow {
-  color: var(--background-darkest);
+.tk-tooltip-content[data-variant=dark] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--background-darkest);
+}
+.tk-tooltip-content[data-variant=dark] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--border-dark);
 }
 .tk-tooltip-content[data-variant=white] {
   background: var(--static-light);
   border: 1px solid var(--border-light);
 }
-.tk-tooltip-content[data-variant=white] .tk-tooltip-arrow {
-  color: var(--static-light);
+.tk-tooltip-content[data-variant=white] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--static-light);
+}
+.tk-tooltip-content[data-variant=white] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--border-light);
 }
 .tk-tooltip-content[data-variant=info] {
   background-color: var(--states-info-light);
   border: 1px solid var(--states-info-sub-base);
 }
-.tk-tooltip-content[data-variant=info] .tk-tooltip-arrow {
-  color: var(--states-info-light);
+.tk-tooltip-content[data-variant=info] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--states-info-light);
+}
+.tk-tooltip-content[data-variant=info] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--states-info-sub-base);
 }
 .tk-tooltip-content[data-variant=success] {
   background-color: var(--states-success-light);
   border: 1px solid var(--states-success-sub-base);
 }
-.tk-tooltip-content[data-variant=success] .tk-tooltip-arrow {
-  color: var(--states-success-light);
+.tk-tooltip-content[data-variant=success] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--states-success-light);
+}
+.tk-tooltip-content[data-variant=success] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--states-success-sub-base);
 }
 .tk-tooltip-content[data-variant=warning] {
   background-color: var(--states-warning-light);
   border: 1px solid var(--states-warning-sub-base);
 }
-.tk-tooltip-content[data-variant=warning] .tk-tooltip-arrow {
-  color: var(--states-warning-light);
+.tk-tooltip-content[data-variant=warning] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--states-warning-light);
+}
+.tk-tooltip-content[data-variant=warning] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--states-warning-sub-base);
 }
 .tk-tooltip-content[data-variant=danger] {
   background-color: var(--states-danger-light);
   border: 1px solid var(--states-danger-sub-base);
 }
-.tk-tooltip-content[data-variant=danger] .tk-tooltip-arrow {
-  color: var(--states-danger-light);
+.tk-tooltip-content[data-variant=danger] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--states-danger-light);
+}
+.tk-tooltip-content[data-variant=danger] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--states-danger-sub-base);
 }
 .tk-tooltip-content[data-variant=neutral] {
   background: var(--background-light);
   border: 1px solid var(--border-sub-base);
 }
-.tk-tooltip-content[data-variant=neutral] .tk-tooltip-arrow {
-  color: var(--background-light);
+.tk-tooltip-content[data-variant=neutral] .tk-tooltip-arrow .tk-arrow-fill {
+  fill: var(--background-light);
+}
+.tk-tooltip-content[data-variant=neutral] .tk-tooltip-arrow .tk-arrow-border {
+  fill: var(--border-sub-base);
 }
 
 .tk-tooltip-header {
@@ -5148,7 +6522,13 @@ body {
 .tk-tooltip-arrow {
   display: block;
   pointer-events: none;
-  color: var(--background-darkest);
+  overflow: visible;
+}
+.tk-tooltip-arrow .tk-arrow-fill {
+  fill: currentColor;
+}
+.tk-tooltip-arrow .tk-arrow-border {
+  fill: currentColor;
 }
 
 .tk-badge {
@@ -5822,15 +7202,6 @@ body {
   width: 16px;
   height: 16px;
 }
-.tk-breadcrumb .tk-breadcrumb-separator[data-variant=dot]::before {
-  content: "•";
-}
-.tk-breadcrumb .tk-breadcrumb-separator[data-variant=slash]::before {
-  content: "/";
-}
-.tk-breadcrumb .tk-breadcrumb-separator[data-variant=vertical]::before {
-  content: "|";
-}
 .tk-breadcrumb:dir(rtl) .tk-breadcrumb-separator > svg {
   transform: scaleX(-1);
 }
@@ -5908,7 +7279,7 @@ body {
   font-size: var(--desktop-body-xs-size);
   font-weight: 300;
   line-height: var(--desktop-body-xs-line-height);
-  z-index: 1300;
+  z-index: 1600;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -5939,50 +7310,71 @@ body {
 .tk-popover-content[data-variant=dark] .tk-popover-header {
   color: var(--text-lightest);
 }
-.tk-popover-content[data-variant=dark] .tk-popover-arrow {
-  color: var(--background-darkest);
+.tk-popover-content[data-variant=dark] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--background-darkest);
+}
+.tk-popover-content[data-variant=dark] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--border-dark);
 }
 .tk-popover-content[data-variant=white] {
   background: var(--static-light);
   border: 1px solid var(--border-light);
 }
-.tk-popover-content[data-variant=white] .tk-popover-arrow {
-  color: var(--static-light);
+.tk-popover-content[data-variant=white] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--static-light);
+}
+.tk-popover-content[data-variant=white] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--border-light);
 }
 .tk-popover-content[data-variant=info] {
   background-color: var(--states-info-light);
   border: 1px solid var(--states-info-sub-base);
 }
-.tk-popover-content[data-variant=info] .tk-popover-arrow {
-  color: var(--states-info-light);
+.tk-popover-content[data-variant=info] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--states-info-light);
+}
+.tk-popover-content[data-variant=info] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--states-info-sub-base);
 }
 .tk-popover-content[data-variant=success] {
   background-color: var(--states-success-light);
   border: 1px solid var(--states-success-sub-base);
 }
-.tk-popover-content[data-variant=success] .tk-popover-arrow {
-  color: var(--states-success-light);
+.tk-popover-content[data-variant=success] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--states-success-light);
+}
+.tk-popover-content[data-variant=success] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--states-success-sub-base);
 }
 .tk-popover-content[data-variant=warning] {
   background-color: var(--states-warning-light);
   border: 1px solid var(--states-warning-sub-base);
 }
-.tk-popover-content[data-variant=warning] .tk-popover-arrow {
-  color: var(--states-warning-light);
+.tk-popover-content[data-variant=warning] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--states-warning-light);
+}
+.tk-popover-content[data-variant=warning] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--states-warning-sub-base);
 }
 .tk-popover-content[data-variant=danger] {
   background-color: var(--states-danger-light);
   border: 1px solid var(--states-danger-sub-base);
 }
-.tk-popover-content[data-variant=danger] .tk-popover-arrow {
-  color: var(--states-danger-light);
+.tk-popover-content[data-variant=danger] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--states-danger-light);
+}
+.tk-popover-content[data-variant=danger] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--states-danger-sub-base);
 }
 .tk-popover-content[data-variant=neutral] {
   background: var(--background-light);
   border: 1px solid var(--border-sub-base);
 }
-.tk-popover-content[data-variant=neutral] .tk-popover-arrow {
-  color: var(--background-light);
+.tk-popover-content[data-variant=neutral] .tk-popover-arrow .tk-arrow-fill {
+  fill: var(--background-light);
+}
+.tk-popover-content[data-variant=neutral] .tk-popover-arrow .tk-arrow-border {
+  fill: var(--border-sub-base);
 }
 
 .tk-popover-header {
@@ -6004,6 +7396,13 @@ body {
 .tk-popover-arrow {
   display: block;
   pointer-events: none;
+  overflow: visible;
+}
+.tk-popover-arrow .tk-arrow-fill {
+  fill: currentColor;
+}
+.tk-popover-arrow .tk-arrow-border {
+  fill: currentColor;
 }
 
 .tk-popover-close {
@@ -6438,3 +7837,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;
+}