@takeoff-design/tokens 0.2.0 → 0.3.0

package/dist/css/aviation/theme.css

@@ -1886,7 +1886,6 @@
 
 
 /* ===== Component Styles ===== */
-@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");
@@ -1976,6 +1975,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);
@@ -4480,6 +4500,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;
@@ -4724,6 +4837,136 @@ 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=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-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 {
+  padding-inline: 0.5rem;
+  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;
+  user-select: none;
+}
+
+.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;
@@ -5344,12 +5587,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);
@@ -5380,6 +5621,32 @@ body {
   border-radius: var(--dropdown-items-basic-small-radius);
 }
 
+.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;
   align-items: center;
@@ -5436,215 +5703,1234 @@ 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] {
-  --tk-spinner-size: var(--spinner-size-xlarge);
+@media (prefers-reduced-motion: reduce) {
+  .tk-skeleton .tk-skeleton-shimmer {
+    display: none;
+  }
 }
-.tk-spinner[data-variant=primary] {
-  --tk-spinner-track-color: var(--primary-light);
-  --tk-spinner-active-color: var(--primary-darkest);
+
+.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-spinner[data-variant=secondary] {
-  --tk-spinner-track-color: var(--secondary-light);
-  --tk-spinner-active-color: var(--secondary-darkest);
+.tk-slider {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--tk-slider-gap);
+  width: 100%;
 }
-.tk-spinner[data-variant=neutral] {
-  --tk-spinner-track-color: var(--background-light);
-  --tk-spinner-active-color: var(--background-darkest);
+.tk-slider[data-orientation=vertical] {
+  flex-direction: row;
+  column-gap: var(--tk-slider-gap);
+  width: auto;
+  height: 100%;
 }
-.tk-spinner[data-variant=info] {
-  --tk-spinner-track-color: var(--states-info-light);
-  --tk-spinner-active-color: var(--states-info-darkest);
+
+.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;
 }
-.tk-spinner[data-variant=success] {
-  --tk-spinner-track-color: var(--states-success-light);
-  --tk-spinner-active-color: var(--states-success-darkest);
+[data-orientation=vertical] .tk-slider-track {
+  width: var(--tk-slider-rail-size);
+  height: 100%;
 }
-.tk-spinner[data-variant=danger] {
-  --tk-spinner-track-color: var(--states-danger-light);
-  --tk-spinner-active-color: var(--states-danger-darkest);
+[data-disabled] .tk-slider-track {
+  cursor: inherit;
 }
-.tk-spinner[data-variant=warning] {
-  --tk-spinner-track-color: var(--states-warning-light);
-  --tk-spinner-active-color: var(--states-warning-darkest);
+[data-readonly] .tk-slider-track {
+  cursor: default;
 }
-.tk-spinner[data-type=rounded] .tk-spinner-indicator {
-  position: relative;
+[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] {
+  --tk-spinner-track-color: var(--primary-light);
+  --tk-spinner-active-color: var(--primary-darkest);
+}
+.tk-spinner[data-variant=secondary] {
+  --tk-spinner-track-color: var(--secondary-light);
+  --tk-spinner-active-color: var(--secondary-darkest);
+}
+.tk-spinner[data-variant=neutral] {
+  --tk-spinner-track-color: var(--background-light);
+  --tk-spinner-active-color: var(--background-darkest);
+}
+.tk-spinner[data-variant=info] {
+  --tk-spinner-track-color: var(--states-info-light);
+  --tk-spinner-active-color: var(--states-info-darkest);
+}
+.tk-spinner[data-variant=success] {
+  --tk-spinner-track-color: var(--states-success-light);
+  --tk-spinner-active-color: var(--states-success-darkest);
+}
+.tk-spinner[data-variant=danger] {
+  --tk-spinner-track-color: var(--states-danger-light);
+  --tk-spinner-active-color: var(--states-danger-darkest);
+}
+.tk-spinner[data-variant=warning] {
+  --tk-spinner-track-color: var(--states-warning-light);
+  --tk-spinner-active-color: var(--states-warning-darkest);
+}
+.tk-spinner[data-type=rounded] .tk-spinner-indicator {
+  position: relative;
 }
 .tk-spinner[data-type=rounded] .tk-spinner-indicator svg {
   position: absolute;
-  inset: 0;
-  display: block;
-  width: var(--tk-spinner-size);
-  height: var(--tk-spinner-size);
-  overflow: visible;
+  inset: 0;
+  display: block;
+  width: var(--tk-spinner-size);
+  height: var(--tk-spinner-size);
+  overflow: visible;
+}
+.tk-spinner[data-type=rounded] .tk-spinner-indicator svg:last-child {
+  animation: tk-spinner-rotate 1s linear infinite;
+}
+.tk-spinner[data-type=rounded] .tk-spinner-indicator circle,
+.tk-spinner[data-type=rounded] .tk-spinner-indicator path {
+  fill: none;
+  stroke-width: 6.6667;
+}
+.tk-spinner[data-type=rounded] .tk-spinner-indicator circle {
+  stroke: var(--tk-spinner-track-color);
+}
+.tk-spinner[data-type=rounded] .tk-spinner-indicator path {
+  stroke: var(--tk-spinner-active-color);
+  stroke-linecap: round;
+}
+.tk-spinner[data-type=loader] .tk-spinner-indicator svg {
+  display: block;
+  width: var(--tk-spinner-size);
+  height: var(--tk-spinner-size);
+  overflow: visible;
+  animation: tk-spinner-rotate 1s linear infinite;
+}
+.tk-spinner[data-type=loader] .tk-spinner-indicator path {
+  fill: none;
+  stroke: var(--tk-spinner-active-color);
+  stroke-linecap: round;
+  stroke-width: var(--tk-spinner-stroke-width);
+}
+.tk-spinner[data-type=pulse] .tk-spinner-indicator {
+  background-color: var(--tk-spinner-active-color);
+  border-radius: var(--radius-full);
+  animation: tk-spinner-pulse 1.5s infinite;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator, .tk-spinner[data-type=lines] .tk-spinner-indicator {
+  position: relative;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot {
+  position: absolute;
+  width: var(--tk-spinner-dot-size);
+  height: var(--tk-spinner-dot-size);
+  background-color: var(--tk-spinner-active-color);
+  border-radius: var(--radius-full);
+  animation: tk-spinner-fade 1.2s linear infinite;
+}
+.tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line {
+  position: absolute;
+  width: calc(var(--tk-spinner-stroke-width) / 2);
+  height: calc(var(--tk-spinner-size) / 4);
+  background-color: var(--tk-spinner-active-color);
+  border-radius: 2px;
+  animation: tk-spinner-fade 1.2s linear infinite;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(1), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(1) {
+  top: -12%;
+  left: 50%;
+  transform: translateX(-50%);
+  animation-delay: -1.1s;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(2), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(2) {
+  top: 14%;
+  left: 85%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  animation-delay: -1s;
+}
+.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(3), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(3) {
+  top: 50%;
+  left: 100%;
+  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(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-spinner[data-type=rounded] .tk-spinner-indicator svg:last-child {
-  animation: tk-spinner-rotate 1s linear infinite;
+.tk-stepper[data-orientation=vertical] {
+  flex-direction: column;
 }
-.tk-spinner[data-type=rounded] .tk-spinner-indicator circle,
-.tk-spinner[data-type=rounded] .tk-spinner-indicator path {
-  fill: none;
-  stroke-width: 6.6667;
+.tk-stepper[data-orientation=vertical] .tk-stepper-trigger {
+  display: flex;
+  flex-direction: row;
 }
-.tk-spinner[data-type=rounded] .tk-spinner-indicator circle {
-  stroke: var(--tk-spinner-track-color);
+.tk-stepper[data-orientation=vertical] .tk-stepper-rail {
+  top: 0;
+  width: 2px;
 }
-.tk-spinner[data-type=rounded] .tk-spinner-indicator path {
-  stroke: var(--tk-spinner-active-color);
-  stroke-linecap: round;
+.tk-stepper[data-orientation=vertical][data-reverse] {
+  align-items: flex-end;
 }
-.tk-spinner[data-type=loader] .tk-spinner-indicator svg {
-  display: block;
-  width: var(--tk-spinner-size);
-  height: var(--tk-spinner-size);
-  overflow: visible;
-  animation: tk-spinner-rotate 1s linear infinite;
+.tk-stepper[data-orientation=vertical][data-reverse] .tk-stepper-trigger {
+  flex-direction: row-reverse;
 }
-.tk-spinner[data-type=loader] .tk-spinner-indicator path {
-  fill: none;
-  stroke: var(--tk-spinner-active-color);
-  stroke-linecap: round;
-  stroke-width: var(--tk-spinner-stroke-width);
+.tk-stepper[data-orientation=vertical][data-reverse] .tk-stepper-indicator {
+  margin-inline-end: 0;
+  margin-inline-start: 8px;
 }
-.tk-spinner[data-type=pulse] .tk-spinner-indicator {
-  background-color: var(--tk-spinner-active-color);
-  border-radius: var(--radius-full);
-  animation: tk-spinner-pulse 1.5s infinite;
+.tk-stepper[data-orientation=vertical][data-reverse] .tk-stepper-content {
+  text-align: right;
+  align-items: flex-end;
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator, .tk-spinner[data-type=lines] .tk-spinner-indicator {
-  position: relative;
+.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-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot {
-  position: absolute;
-  width: var(--tk-spinner-dot-size);
-  height: var(--tk-spinner-dot-size);
-  background-color: var(--tk-spinner-active-color);
-  border-radius: var(--radius-full);
-  animation: tk-spinner-fade 1.2s linear infinite;
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator:empty::before {
+  width: 6px;
+  height: 6px;
 }
-.tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line {
-  position: absolute;
-  width: calc(var(--tk-spinner-stroke-width) / 2);
-  height: calc(var(--tk-spinner-size) / 4);
-  background-color: var(--tk-spinner-active-color);
-  border-radius: 2px;
-  animation: tk-spinner-fade 1.2s linear infinite;
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator > svg,
+.tk-stepper[data-size=xsmall] .tk-stepper-indicator > img {
+  width: 16px;
+  height: 16px;
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(1), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(1) {
-  top: -12%;
-  left: 50%;
-  transform: translateX(-50%);
-  animation-delay: -1.1s;
+.tk-stepper[data-size=xsmall] .tk-stepper-title {
+  font-size: var(--desktop-body-2xs-size);
+  line-height: var(--desktop-body-2xs-line-height);
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(2), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(2) {
-  top: 14%;
-  left: 85%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  animation-delay: -1s;
+.tk-stepper[data-size=xsmall] .tk-stepper-description {
+  font-size: 10px;
+  line-height: 14px;
 }
-.tk-spinner[data-type=dots] .tk-spinner-indicator .tk-spinner-dot:nth-child(3), .tk-spinner[data-type=lines] .tk-spinner-indicator .tk-spinner-line:nth-child(3) {
-  top: 50%;
-  left: 100%;
-  transform: translate(-50%, -50%) rotate(90deg);
-  animation-delay: -0.9s;
+.tk-stepper[data-size=xsmall][data-orientation=horizontal] .tk-stepper-content {
+  width: 96px;
+  margin-top: 0;
 }
-.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-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-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-size=xsmall][data-orientation=horizontal][data-reverse] .tk-stepper-trigger {
+  padding-bottom: 16px;
 }
-.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-size=xsmall][data-orientation=horizontal][data-reverse] .tk-stepper-rail {
+  top: auto;
+  bottom: 7px;
 }
-.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-size=xsmall][data-orientation=vertical] .tk-stepper-item {
+  min-height: 50px;
 }
-.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-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-spinner[data-type=threeDots] .tk-spinner-indicator {
+.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;
-  align-items: center;
-  justify-content: center;
+  width: 100%;
+  gap: var(--stepper-segment-gap);
+  border-top: 2px solid var(--border-light);
+  transition: border-top-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=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-spinner[data-type=threeDots] .tk-spinner-indicator .tk-spinner-dot:nth-child(1) {
-  animation-delay: -0.45s;
+.tk-stepper[data-mode=compact][data-orientation=horizontal] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-top-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=horizontal] .tk-stepper-indicator {
+  margin: 4px 0 0 0;
 }
-.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=horizontal] .tk-stepper-content {
+  align-items: flex-start;
+  text-align: start;
+  width: auto;
+  min-height: 0;
+  margin: 4px 0 0 0;
 }
-.tk-spinner[data-type=logo] .tk-spinner-indicator {
-  animation: tk-spinner-rotate 1s steps(4) infinite;
+.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=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=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);
 }
-@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=horizontal][data-reverse] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-bottom-color: var(--states-danger-base);
+}
+.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-stepper[data-mode=compact][data-orientation=horizontal][data-reverse] .tk-stepper-content {
+  margin: 0 0 4px 0;
+}
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-trigger {
+  display: flex;
+  width: 100%;
+  gap: var(--stepper-segment-gap);
+  border-left: 2px solid var(--border-light);
+  transition: border-left-color 0.2s 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-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-item[data-error] .tk-stepper-trigger {
+  border-left-color: var(--states-danger-base);
+}
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-indicator {
+  margin: 0 0 0 4px;
+}
+.tk-stepper[data-mode=compact][data-orientation=vertical] .tk-stepper-content {
+  margin-left: 4px;
+  min-height: 0;
+}
+.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-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);
+}
+.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 {
@@ -6942,7 +8228,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;
@@ -6970,50 +8256,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 {
@@ -7035,7 +8342,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 {
@@ -7709,15 +9022,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);
 }
@@ -7795,7 +9099,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;
@@ -7826,50 +9130,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 {
@@ -7891,6 +9216,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 {