@skbkontur/react-ui 6.4.7-25ce4.0 → 6.4.7-9ac75.0

package/react-ui.css

@@ -18,54 +18,54 @@
   position: relative;
   text-decoration: none;
   color: inherit;
-  color: var(--k-menuItemTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-menuItemTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   border-radius: var(--k-menuItemBorderRadius, 6px);
 }
 .react-ui-MenuItem__rootSmall {
-  line-height: var(--k-menuItemLineHeightSmall, 20px);
-  font-size: var(--k-menuItemFontSizeSmall, 14px);
+  line-height: var(--k-menuItemLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  font-size: var(--k-menuItemFontSizeSmall, var(--k-fontSizeSmall, 14px));
   padding: var(--k-menuItemPaddingYSmall, 6px) var(--k-menuItemPaddingXSmall, 8px) var(--k-menuItemPaddingYSmall, 6px) var(--k-menuItemPaddingXSmall, 8px);
 }
 .react-ui-MenuItem__rootMedium {
-  line-height: var(--k-menuItemLineHeightMedium, 22px);
-  font-size: var(--k-menuItemFontSizeMedium, 16px);
+  line-height: var(--k-menuItemLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
+  font-size: var(--k-menuItemFontSizeMedium, var(--k-fontSizeMedium, 16px));
   padding: var(--k-menuItemPaddingYMedium, 9px) var(--k-menuItemPaddingXMedium, 12px) var(--k-menuItemPaddingYMedium, 9px) var(--k-menuItemPaddingXMedium, 12px);
 }
 .react-ui-MenuItem__rootLarge {
-  line-height: var(--k-menuItemLineHeightLarge, 24px);
-  font-size: var(--k-menuItemFontSizeLarge, 18px);
+  line-height: var(--k-menuItemLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
+  font-size: var(--k-menuItemFontSizeLarge, var(--k-fontSizeLarge, 18px));
   padding: var(--k-menuItemPaddingYLarge, 12px) var(--k-menuItemPaddingXLarge, 16px) var(--k-menuItemPaddingYLarge, 12px) var(--k-menuItemPaddingXLarge, 16px);
 }
 .react-ui-MenuItem__rootMobile {
-  font-size: var(--k-menuItemFontSizeMobile, 18px);
-  line-height: var(--k-menuItemLineHeightMobile, 24px);
+  font-size: var(--k-menuItemFontSizeMobile, var(--k-fontSizeMobile, 18px));
+  line-height: var(--k-menuItemLineHeightMobile, var(--k-lineHeightMobile, 24px));
   padding: var(--k-menuItemPaddingMobile, 12px 16px);
 }
 .react-ui-MenuItem__rootMobileLarge {
-  font-size: var(--k-mobileMenuItemFontSizeLarge, 18px);
-  line-height: var(--k-mobileMenuItemLineHeightLarge, 24px);
+  font-size: var(--k-mobileMenuItemFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-mobileMenuItemLineHeightLarge, var(--k-lineHeightMobile, 24px));
   padding: var(--k-mobileMenuItemPaddingLarge, 12px 16px);
 }
 .react-ui-MenuItem__rootMobileMedium {
-  font-size: var(--k-mobileMenuItemFontSizeMedium, 16px);
-  line-height: var(--k-mobileMenuItemLineHeightMedium, 24px);
+  font-size: var(--k-mobileMenuItemFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-mobileMenuItemLineHeightMedium, var(--k-lineHeightMobile, 24px));
   padding: var(--k-mobileMenuItemPaddingMedium, 9px 12px);
 }
 .react-ui-MenuItem__rootMobileSmall {
-  font-size: var(--k-mobileMenuItemFontSizeSmall, 14px);
-  line-height: var(--k-mobileMenuItemLineHeightSmall, 24px);
+  font-size: var(--k-mobileMenuItemFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-mobileMenuItemLineHeightSmall, var(--k-lineHeightMobile, 24px));
   padding: var(--k-mobileMenuItemPaddingSmall, 6px 8px);
 }
 .react-ui-MenuItem__hover {
   background: var(--k-menuItemHoverBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06))) !important;
-  color: var(--k-menuItemHoverColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
+  color: var(--k-menuItemHoverColor, var(--k-menuItemTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))))) !important;
 }
 .react-ui-MenuItem__selected {
   background: var(--k-menuItemSelectedBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
 }
 .react-ui-MenuItem__disabled {
   background: var(--k-menuItemDisabledBg, transparent);
-  color: var(--k-menuItemDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-menuItemDisabledColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
   cursor: default;
 }
 .react-ui-MenuItem__nonSelectable {
@@ -90,11 +90,11 @@
   padding-top: 4px;
 }
 .react-ui-MenuItem__commentHover {
-  color: var(--k-menuItemCommentColorHover, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-menuItemCommentColorHover, var(--k-menuItemTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
   opacity: var(--k-menuItemCommentOpacityHover, 0.6);
 }
 .react-ui-MenuItem__commentDisabled {
-  color: var(--k-menuItemDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-menuItemDisabledColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-MenuItem__icon {
   display: inline-block;
@@ -208,7 +208,7 @@ button.react-ui-MenuItem__root {
 }
 /* internal/Menu/Menu.css.ts */
 .react-ui-Menu__root {
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-radius: var(--k-menuBorderRadius, 8px);
   box-sizing: var(--k-menuBoxSizing, border-box);
   outline: none;
@@ -260,43 +260,43 @@ button.react-ui-MenuItem__root {
 }
 /* internal/MenuMessage/MenuMessage.css.ts */
 .react-ui-MenuMessage__rootSmall {
-  font-size: var(--k-menuMessageFontSizeSmall, 14px);
-  line-height: var(--k-menuMessageLineHeightSmall, 20px);
+  font-size: var(--k-menuMessageFontSizeSmall, var(--k-menuItemFontSizeSmall, var(--k-fontSizeSmall, 14px)));
+  line-height: var(--k-menuMessageLineHeightSmall, var(--k-menuItemLineHeightSmall, var(--k-controlLineHeightSmall, 20px)));
 }
 .react-ui-MenuMessage__rootMedium {
-  font-size: var(--k-menuMessageFontSizeMedium, 16px);
-  line-height: var(--k-menuMessageLineHeightMedium, 22px);
+  font-size: var(--k-menuMessageFontSizeMedium, var(--k-menuItemFontSizeMedium, var(--k-fontSizeMedium, 16px)));
+  line-height: var(--k-menuMessageLineHeightMedium, var(--k-menuItemLineHeightMedium, var(--k-controlLineHeightMedium, 22px)));
 }
 .react-ui-MenuMessage__rootLarge {
-  font-size: var(--k-menuMessageFontSizeLarge, 18px);
-  line-height: var(--k-menuMessageLineHeightLarge, 24px);
+  font-size: var(--k-menuMessageFontSizeLarge, var(--k-menuItemFontSizeLarge, var(--k-fontSizeLarge, 18px)));
+  line-height: var(--k-menuMessageLineHeightLarge, var(--k-menuItemLineHeightLarge, var(--k-controlLineHeightLarge, 24px)));
 }
 .react-ui-MenuMessage__root {
   margin: 0;
-  display: var(--k-menuMessageDisplay, block);
-  padding: var(--k-menuMessagePaddingY, 6px) var(--k-menuMessagePaddingX, 8px) var(--k-menuMessagePaddingY, 6px) var(--k-menuMessagePaddingX, 8px);
-  color: var(--k-menuMessageTextColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
-  background: var(--k-menuMessageBg, transparent);
+  display: var(--k-menuMessageDisplay, var(--k-menuItemDisplay, block));
+  padding: var(--k-menuMessagePaddingY, var(--k-menuItemPaddingYSmall, 6px)) var(--k-menuMessagePaddingX, var(--k-menuItemPaddingXSmall, 8px)) var(--k-menuMessagePaddingY, var(--k-menuItemPaddingYSmall, 6px)) var(--k-menuMessagePaddingX, var(--k-menuItemPaddingXSmall, 8px));
+  color: var(--k-menuMessageTextColor, var(--k-menuItemDisabledColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)))));
+  background: var(--k-menuMessageBg, var(--k-menuItemDisabledBg, transparent));
 }
 .react-ui-MenuMessage__rootMobile {
-  font-size: var(--k-menuMessageFontSizeMobile, 18px);
-  line-height: var(--k-menuMessageLineHeightMobile, 24px);
-  padding: var(--k-menuMessagePaddingMobile, 12px 16px);
+  font-size: var(--k-menuMessageFontSizeMobile, var(--k-menuItemFontSizeMobile, var(--k-fontSizeMobile, 18px)));
+  line-height: var(--k-menuMessageLineHeightMobile, var(--k-menuItemLineHeightMobile, var(--k-lineHeightMobile, 24px)));
+  padding: var(--k-menuMessagePaddingMobile, var(--k-menuItemPaddingMobile, 12px 16px));
 }
 .react-ui-MenuMessage__rootMobileLarge {
-  font-size: var(--k-mobileMenuMessageFontSizeLarge, 18px);
-  line-height: var(--k-mobileMenuMessageLineHeightLarge, 24px);
-  padding: var(--k-mobileMenuMessagePaddingLarge, 12px 16px);
+  font-size: var(--k-mobileMenuMessageFontSizeLarge, var(--k-mobileMenuItemFontSizeLarge, var(--k-fontSizeLarge, 18px)));
+  line-height: var(--k-mobileMenuMessageLineHeightLarge, var(--k-menuItemLineHeightLarge, var(--k-controlLineHeightLarge, 24px)));
+  padding: var(--k-mobileMenuMessagePaddingLarge, var(--k-mobileMenuItemPaddingLarge, 12px 16px));
 }
 .react-ui-MenuMessage__rootMobileMedium {
-  font-size: var(--k-mobileMenuMessageFontSizeMedium, 16px);
-  line-height: var(--k-mobileMenuMessageLineHeightMedium, 22px);
-  padding: var(--k-mobileMenuMessagePaddingMedium, 9px 12px);
+  font-size: var(--k-mobileMenuMessageFontSizeMedium, var(--k-mobileMenuItemFontSizeMedium, var(--k-fontSizeMedium, 16px)));
+  line-height: var(--k-mobileMenuMessageLineHeightMedium, var(--k-menuItemLineHeightMedium, var(--k-controlLineHeightMedium, 22px)));
+  padding: var(--k-mobileMenuMessagePaddingMedium, var(--k-mobileMenuItemPaddingMedium, 9px 12px));
 }
 .react-ui-MenuMessage__rootMobileSmall {
-  font-size: var(--k-mobileMenuMessageFontSizeSmall, 14px);
-  line-height: var(--k-mobileMenuMessageLineHeightSmall, 20px);
-  padding: var(--k-mobileMenuMessagePaddingSmall, 6px 8px);
+  font-size: var(--k-mobileMenuMessageFontSizeSmall, var(--k-mobileMenuItemFontSizeSmall, var(--k-fontSizeSmall, 14px)));
+  line-height: var(--k-mobileMenuMessageLineHeightSmall, var(--k-menuItemLineHeightSmall, var(--k-controlLineHeightSmall, 20px)));
+  padding: var(--k-mobileMenuMessagePaddingSmall, var(--k-mobileMenuItemPaddingSmall, 6px 8px));
 }
 /* internal/HideBodyVerticalScroll/HideBodyVerticalScroll.css.ts */
 .react-ui-HideBodyVerticalScroll__root {
@@ -383,19 +383,19 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Spinner__small {
   margin-left: var(--k-spinnerCaptionGapSmall, 6px);
-  font-size: var(--k-spinnerFontSizeSmall, 14px);
-  line-height: var(--k-spinnerLineHeightSmall, 20px);
+  font-size: var(--k-spinnerFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-spinnerLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-Spinner__medium {
   display: block;
-  font-size: var(--k-spinnerFontSizeMedium, 16px);
-  line-height: var(--k-spinnerLineHeightMedium, 22px);
+  font-size: var(--k-spinnerFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-spinnerLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
   margin-top: var(--k-spinnerCaptionGapMedium, -4px);
 }
 .react-ui-Spinner__large {
   display: block;
-  font-size: var(--k-spinnerFontSizeLarge, 18px);
-  line-height: var(--k-spinnerLineHeightLarge, 24px);
+  font-size: var(--k-spinnerFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-spinnerLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
   margin-top: var(--k-spinnerCaptionGapLarge, -3px);
 }
 .react-ui-Spinner__spinner {
@@ -465,7 +465,7 @@ button.react-ui-MenuItem__root {
   border-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   overflow: hidden;
   padding-bottom: var(--k-mobilePopupContainerBottomPadding, 8px);
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
 }
 .react-ui-MobilePopup__wrapper {
   position: fixed;
@@ -493,7 +493,7 @@ button.react-ui-MenuItem__root {
   justify-content: flex-end;
   border-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   overflow: hidden;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   max-height: calc(100vh - (2 * var(--k-mobilePopupPositionY, 16px)));
   max-height: calc(100dvh - (2 * var(--k-mobilePopupPositionY, 16px)));
 }
@@ -561,14 +561,14 @@ button.react-ui-MenuItem__root {
   position: relative;
   display: flex;
   flex-direction: column;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   padding: var(--k-mobilePopupFooterPadding, 16px 16px 16px 16px);
 }
 .react-ui-MobilePopupFooter__rootSmall6_1 {
   position: relative;
   display: flex;
   flex-direction: column;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-bottom-left-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   border-bottom-right-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   padding: var(--k-mobilePopupFooterPaddingSmall, 0 6px 6px);
@@ -577,7 +577,7 @@ button.react-ui-MenuItem__root {
   position: relative;
   display: flex;
   flex-direction: column;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-bottom-left-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   border-bottom-right-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   padding: var(--k-mobilePopupFooterPaddingMedium, 0 6px 6px);
@@ -586,7 +586,7 @@ button.react-ui-MenuItem__root {
   position: relative;
   display: flex;
   flex-direction: column;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-bottom-left-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   border-bottom-right-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   padding: var(--k-mobilePopupFooterPaddingLarge, 0 8px 8px);
@@ -605,21 +605,21 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-MobilePopupHeader__rootSmall6_1 {
   position: relative;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-top-left-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   border-top-right-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   padding-top: var(--k-mobilePopupPaddingSmall, 6px);
 }
 .react-ui-MobilePopupHeader__rootMedium6_1 {
   position: relative;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-top-left-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   border-top-right-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   padding-top: var(--k-mobilePopupPaddingMedium, 6px);
 }
 .react-ui-MobilePopupHeader__rootLarge6_1 {
   position: relative;
-  background: var(--k-menuBgDefault, var(--k-color-surface-high, #ffffff));
+  background: var(--k-menuBgDefault, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   border-top-left-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   border-top-right-radius: var(--k-mobilePopupContainerBorderRadius, 8px);
   padding-top: var(--k-mobilePopupPaddingLarge, 8px);
@@ -640,8 +640,8 @@ button.react-ui-MenuItem__root {
   padding: var(--k-mobilePopupHeaderPaddingLarge, 12px 16px 8px 24px);
 }
 .react-ui-MobilePopupHeader__caption {
-  font-size: var(--k-mobilePopupHeaderFontSize, 18px);
-  line-height: var(--k-mobilePopupHeaderLineHeight, 24px);
+  font-size: var(--k-mobilePopupHeaderFontSize, var(--k-fontSizeMobile, 18px));
+  line-height: var(--k-mobilePopupHeaderLineHeight, var(--k-lineHeightMobile, 24px));
   font-weight: var(--k-mobilePopupHeaderFontWeight, 500);
   color: var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
 }
@@ -696,7 +696,7 @@ button.react-ui-MenuItem__root {
   line-height: normal;
 }
 .react-ui-Popup__contentInner {
-  color: var(--k-popupTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-popupTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   background: var(--k-popupBackground, var(--k-color-surface-high, #ffffff));
 }
 .react-ui-Popup__shadow {
@@ -778,26 +778,26 @@ button.react-ui-MenuItem__root {
   justify-content: var(--k-clearCrossIconAlign, flex-start);
   align-items: center;
   position: absolute;
-  right: calc(-1 * var(--k-inputBorderWidth, 1px));
-  top: calc(-1 * var(--k-inputBorderWidth, 1px));
+  right: calc(-1 * var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px)));
+  top: calc(-1 * var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px)));
 }
 .react-ui-ClearCrossIcon__focus {
   color: var(--k-clearCrossIconHoverColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
 }
 .react-ui-ClearCrossIcon__clearCrossSmall {
   width: var(--k-clearCrossIconWidthSmall, 24px);
-  height: var(--k-clearCrossIconHeightSmall, 32px);
-  border-radius: var(--k-clearCrossIconBorderRadiusSmall, 2px);
+  height: var(--k-clearCrossIconHeightSmall, var(--k-inputHeightSmall, 32px));
+  border-radius: var(--k-clearCrossIconBorderRadiusSmall, var(--k-inputBorderRadiusSmall, 2px));
 }
 .react-ui-ClearCrossIcon__clearCrossMedium {
   width: var(--k-clearCrossIconWidthMedium, 30px);
-  height: var(--k-clearCrossIconHeightMedium, 40px);
-  border-radius: var(--k-clearCrossIconBorderRadiusMedium, 2px);
+  height: var(--k-clearCrossIconHeightMedium, var(--k-inputHeightMedium, 40px));
+  border-radius: var(--k-clearCrossIconBorderRadiusMedium, var(--k-inputBorderRadiusMedium, 2px));
 }
 .react-ui-ClearCrossIcon__clearCrossLarge {
   width: var(--k-clearCrossIconWidthLarge, 36px);
-  height: var(--k-clearCrossIconHeightLarge, 48px);
-  border-radius: var(--k-clearCrossIconBorderRadiusLarge, 2px);
+  height: var(--k-clearCrossIconHeightLarge, var(--k-inputHeightLarge, 48px));
+  border-radius: var(--k-clearCrossIconBorderRadiusLarge, var(--k-inputBorderRadiusLarge, 2px));
 }
 .react-ui-ClearCrossIcon__relativeWidthSmall {
   display: inline-block;
@@ -852,8 +852,8 @@ button.react-ui-MenuItem__root {
   align-items: center;
   background-clip: var(--k-inputBackgroundClip, padding-box);
   background-color: var(--k-inputBg, var(--k-color-shape-other-field, #ffffff));
-  border: var(--k-inputBorderWidth, 1px) solid var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
-  border-top-color: var(--k-inputBorderTopColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border: var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border-top-color: var(--k-inputBorderTopColor, var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
   transition: border-color var(--k-transitionDuration, 100ms) var(--k-transitionTimingFunction, cubic-bezier(0.5, 1, 0.89, 1));
   box-shadow: var(--k-inputShadow, none);
   box-sizing: border-box;
@@ -868,7 +868,7 @@ button.react-ui-MenuItem__root {
   -webkit-appearance: none;
   background: transparent;
   border: 0 none;
-  color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   font: inherit;
   line-height: inherit;
   margin: 0;
@@ -880,35 +880,35 @@ button.react-ui-MenuItem__root {
   color-scheme: var(--k-inputColorScheme, light);
 }
 .react-ui-Input__inputDisabled {
-  color: var(--k-inputTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
-  -webkit-text-fill-color: var(--k-inputTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
+  -webkit-text-fill-color: var(--k-inputTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__sizeSmall {
-  font-size: var(--k-inputFontSizeSmall, 14px);
-  line-height: var(--k-inputLineHeightSmall, 20px);
-  padding-top: var(--k-inputPaddingYSmall, 5px);
-  padding-bottom: var(--k-inputPaddingYSmall, 5px);
+  font-size: var(--k-inputFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-inputLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  padding-top: var(--k-inputPaddingYSmall, var(--k-controlPaddingYSmall, 5px));
+  padding-bottom: var(--k-inputPaddingYSmall, var(--k-controlPaddingYSmall, 5px));
   padding-left: var(--k-inputPaddingXSmall, 7px);
   padding-right: var(--k-inputPaddingXSmall, 7px);
   height: var(--k-inputHeightSmall, 32px);
   border-radius: var(--k-inputBorderRadiusSmall, 2px);
 }
 .react-ui-Input__sizeMedium {
-  font-size: var(--k-inputFontSizeMedium, 16px);
-  line-height: var(--k-inputLineHeightMedium, 22px);
-  padding-top: var(--k-inputPaddingYMedium, 8px);
-  padding-bottom: var(--k-inputPaddingYMedium, 8px);
+  font-size: var(--k-inputFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-inputLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
+  padding-top: var(--k-inputPaddingYMedium, var(--k-controlPaddingYMedium, 8px));
+  padding-bottom: var(--k-inputPaddingYMedium, var(--k-controlPaddingYMedium, 8px));
   padding-left: var(--k-inputPaddingXMedium, 11px);
   padding-right: var(--k-inputPaddingXMedium, 11px);
   height: var(--k-inputHeightMedium, 40px);
   border-radius: var(--k-inputBorderRadiusMedium, 2px);
 }
 .react-ui-Input__sizeLarge {
-  font-size: var(--k-inputFontSizeLarge, 18px);
-  line-height: var(--k-inputLineHeightLarge, 24px);
+  font-size: var(--k-inputFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-inputLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
   height: var(--k-inputHeightLarge, 48px);
-  padding-top: var(--k-inputPaddingYLarge, 11px);
-  padding-bottom: var(--k-inputPaddingYLarge, 11px);
+  padding-top: var(--k-inputPaddingYLarge, var(--k-controlPaddingYLarge, 11px));
+  padding-bottom: var(--k-inputPaddingYLarge, var(--k-controlPaddingYLarge, 11px));
   padding-left: var(--k-inputPaddingXLarge, 15px);
   padding-right: var(--k-inputPaddingXLarge, 15px);
   border-radius: var(--k-inputBorderRadiusLarge, 2px);
@@ -917,9 +917,9 @@ button.react-ui-MenuItem__root {
   caret-color: transparent;
 }
 .react-ui-Input__focus {
-  background-color: var(--k-inputFocusedBg, var(--k-color-shape-other-field, #ffffff));
-  border-color: var(--k-inputBorderColorFocus, var(--k-color-line-accent-bold, #484848));
-  box-shadow: var(--k-inputFocusShadow, 0 0 0 calc(2px - 1px) var(--k-color-line-accent-bold, #484848));
+  background-color: var(--k-inputFocusedBg, var(--k-inputBg, var(--k-color-shape-other-field, #ffffff)));
+  border-color: var(--k-inputBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
+  box-shadow: var(--k-inputFocusShadow, 0 0 0 var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px)) var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   outline: none;
   z-index: 2;
 }
@@ -929,24 +929,24 @@ button.react-ui-MenuItem__root {
   background-clip: padding-box;
 }
 .react-ui-Input__disabled {
-  background-color: var(--k-inputDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
-  border-color: var(--k-inputDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  background-color: var(--k-inputDisabledBg, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))));
+  border-color: var(--k-inputDisabledBorderColor, var(--k-borderColorDisabled, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))));
   box-shadow: none;
   cursor: default;
 }
 .react-ui-Input__warning {
-  border-color: var(--k-inputBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
-  box-shadow: 0 0 0 var(--k-inputOutlineWidth, calc(2px - 1px)) var(--k-inputBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border-color: var(--k-inputBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
+  box-shadow: 0 0 0 var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px)) var(--k-inputBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
   z-index: 2;
 }
 .react-ui-Input__error {
-  border-color: var(--k-inputBorderColorError, var(--k-color-line-error-bold, #d6192a));
-  box-shadow: 0 0 0 var(--k-inputOutlineWidth, calc(2px - 1px)) var(--k-inputBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border-color: var(--k-inputBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
+  box-shadow: 0 0 0 var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px)) var(--k-inputBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
   z-index: 2;
 }
 .react-ui-Input__placeholder {
   -ms-user-select: none;
-  color: var(--k-inputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
   cursor: text;
   font-size: inherit;
   height: 100%;
@@ -960,10 +960,10 @@ button.react-ui-MenuItem__root {
   width: 100%;
 }
 .react-ui-Input__placeholderFocus {
-  color: var(--k-inputPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
+  color: var(--k-inputPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%)));
 }
 .react-ui-Input__placeholderDisabled {
-  color: var(--k-inputPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__wrapper::before {
   content: '\A0';
@@ -975,35 +975,35 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Input__input:-moz-placeholder {
   opacity: 1;
-  color: var(--k-inputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__input::-moz-placeholder {
   opacity: 1;
-  color: var(--k-inputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__input::-ms-clear {
   display: none;
 }
 .react-ui-Input__input::placeholder {
-  color: var(--k-inputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__inputFocus:-moz-placeholder {
-  color: var(--k-inputPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
+  color: var(--k-inputPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%)));
 }
 .react-ui-Input__inputFocus::-moz-placeholder {
-  color: var(--k-inputPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
+  color: var(--k-inputPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%)));
 }
 .react-ui-Input__inputFocus::placeholder {
-  color: var(--k-inputPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
+  color: var(--k-inputPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%)));
 }
 .react-ui-Input__inputDisabled:-moz-placeholder {
-  -webkit-text-fill-color: var(--k-inputPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  -webkit-text-fill-color: var(--k-inputPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__inputDisabled::-moz-placeholder {
-  -webkit-text-fill-color: var(--k-inputPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  -webkit-text-fill-color: var(--k-inputPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__inputDisabled::placeholder {
-  -webkit-text-fill-color: var(--k-inputPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  -webkit-text-fill-color: var(--k-inputPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Input__hovering:hover {
   border-color: var(--k-inputBorderColorHover, var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24)));
@@ -1026,8 +1026,8 @@ button.react-ui-MenuItem__root {
   align-items: center;
   background-clip: var(--k-inputBackgroundClip, padding-box);
   background-color: var(--k-inputBg, var(--k-color-shape-other-field, #ffffff));
-  border: var(--k-inputBorderWidth, 1px) solid var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
-  border-top-color: var(--k-inputBorderTopColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border: var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border-top-color: var(--k-inputBorderTopColor, var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
   transition: border-color var(--k-transitionDuration, 100ms) var(--k-transitionTimingFunction, cubic-bezier(0.5, 1, 0.89, 1));
   box-shadow: var(--k-inputShadow, none);
   box-sizing: border-box;
@@ -1054,20 +1054,20 @@ button.react-ui-MenuItem__root {
   color: var(--k-inputIconColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
 }
 .react-ui-InputLayout__iconFocus {
-  color: var(--k-inputFocusedIconColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
+  color: var(--k-inputFocusedIconColor, var(--k-inputIconColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56))));
 }
 .react-ui-InputLayout__iconDisabled {
   cursor: default;
-  color: var(--k-inputIconColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputIconColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-InputLayout__text {
-  color: var(--k-inputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-InputLayout__text6_4 {
   color: var(--k-inputAffixColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
 }
 .react-ui-InputLayout__textDisabled {
-  color: var(--k-inputPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-InputLayout__counter {
   font-variant-numeric: tabular-nums;
@@ -1083,7 +1083,7 @@ button.react-ui-MenuItem__root {
   margin-left: var(--k-inputCounterMarginLeftLarge, 8px);
 }
 .react-ui-InputLayout__counterError {
-  color: var(--k-inputCounterColorError, var(--k-color-text-error-heavy, #c50220));
+  color: var(--k-inputCounterColorError, var(--k-errorText, var(--k-color-text-error-heavy, #c50220)));
 }
 .react-ui-InputLayout__counterHelp {
   margin-left: var(--k-inputCounterHelpMarginLeft, 4px);
@@ -1124,7 +1124,7 @@ button.react-ui-MenuItem__root {
   color: var(--k-closeBtnIconDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
 }
 .react-ui-CloseButtonIcon__focus {
-  box-shadow: var(--k-closeBtnIconFocusShadow, inset 0 0 0 1px var(--k-color-line-accent-bold, #484848), inset 0 0 0 2px var(--k-color-surface-base, #ffffff));
+  box-shadow: var(--k-closeBtnIconFocusShadow, inset 0 0 0 1px var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)), inset 0 0 0 2px var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff)));
 }
 .react-ui-CloseButtonIcon__wrapper {
   box-sizing: content-box;
@@ -1172,18 +1172,18 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Tooltip__tooltipContentSmall {
   padding: var(--k-tooltipPaddingYSmall, 16px) var(--k-tooltipPaddingXSmall, 16px);
-  font-size: var(--k-tooltipFontSizeSmall, 14px);
-  line-height: var(--k-tooltipLineHeightSmall, 20px);
+  font-size: var(--k-tooltipFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-tooltipLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-Tooltip__tooltipContentMedium {
   padding: var(--k-tooltipPaddingYMedium, 20px) var(--k-tooltipPaddingXMedium, 20px);
-  font-size: var(--k-tooltipFontSizeMedium, 16px);
-  line-height: var(--k-tooltipLineHeightMedium, 22px);
+  font-size: var(--k-tooltipFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-tooltipLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-Tooltip__tooltipContentLarge {
   padding: var(--k-tooltipPaddingYLarge, 24px) var(--k-tooltipPaddingXLarge, 24px);
-  font-size: var(--k-tooltipFontSizeLarge, 18px);
-  line-height: var(--k-tooltipLineHeightLarge, 24px);
+  font-size: var(--k-tooltipFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-tooltipLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-Tooltip__closeButton:hover {
   color: var(--k-tooltipCloseBtnHoverColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
@@ -1204,11 +1204,11 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-MaskedInternal__typed {
   white-space: pre;
-  color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-MaskedInternal__mask {
   white-space: pre;
-  color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-MaskedInternal__selectedSegment {
   background-color: #3390ff;
@@ -1218,30 +1218,30 @@ button.react-ui-MenuItem__root {
 .react-ui-MaskedInternal__input:-internal-autofill-selected {
   background-color: var(--k-inputBg, var(--k-color-shape-other-field, #ffffff)) !important;
   background-image: none !important;
-  color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
+  color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
 }
 .react-ui-MaskedInternal__input:-webkit-autofill, .react-ui-MaskedInternal__input:-webkit-autofill:hover, .react-ui-MaskedInternal__input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0 1000px var(--k-inputBg, var(--k-color-shape-other-field, #ffffff)) inset;
   box-shadow: 0 0 0 1000px var(--k-inputBg, var(--k-color-shape-other-field, #ffffff)) inset;
-  -webkit-text-fill-color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
-  color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
-  caret-color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
+  -webkit-text-fill-color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
+  color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
+  caret-color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
   transition: background-color 0s 600000s,color 0s 600000s !important;
 }
 .react-ui-MaskedInternal__input:disabled {
-  color: var(--k-inputTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-MaskedInternal__input:disabled:-internal-autofill-selected {
-  background-color: var(--k-inputDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))) !important;
+  background-color: var(--k-inputDisabledBg, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)))) !important;
 }
 .react-ui-MaskedInternal__input:disabled:-webkit-autofill, .react-ui-MaskedInternal__input:disabled:-webkit-autofill:hover, .react-ui-MaskedInternal__input:disabled:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0 1000px var(--k-inputDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))) inset;
-  box-shadow: 0 0 0 1000px var(--k-inputDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))) inset;
+  -webkit-box-shadow: 0 0 0 1000px var(--k-inputDisabledBg, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)))) inset;
+  box-shadow: 0 0 0 1000px var(--k-inputDisabledBg, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)))) inset;
 }
 .react-ui-MaskedInternal__input.react-ui-masked-internal-masked {
   color: transparent;
   -webkit-text-fill-color: transparent;
-  caret-color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  caret-color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-MaskedInternal__input.react-ui-masked-internal-masked::selection {
   background-color: transparent !important;
@@ -1250,21 +1250,21 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-MaskedInternal__input.react-ui-masked-internal-masked:-internal-autofill-selected {
   color: transparent !important;
-  caret-color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
+  caret-color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
 }
 .react-ui-MaskedInternal__input.react-ui-masked-internal-masked:-webkit-autofill, .react-ui-MaskedInternal__input.react-ui-masked-internal-masked:-webkit-autofill:hover, .react-ui-MaskedInternal__input.react-ui-masked-internal-masked:-webkit-autofill:focus {
   -webkit-text-fill-color: transparent !important;
   color: transparent !important;
-  caret-color: var(--k-inputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
+  caret-color: var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
 }
 .react-ui-MaskedInternal__typed.react-ui-masked-internal-disabled {
-  color: var(--k-inputTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-MaskedInternal__mask.react-ui-masked-internal-colored {
-  color: var(--k-inputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-MaskedInternal__mask.react-ui-masked-internal-disabled {
-  color: var(--k-inputTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 /* lib/styles/UiFont.css.ts */
 @font-face {
@@ -1353,7 +1353,7 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Link__focus {
   text-decoration: var(--k-linkHoverTextDecoration, none);
-  outline: var(--k-linkFocusOutline, 2px solid var(--k-color-line-accent-bold, #484848));
+  outline: var(--k-linkFocusOutline, var(--k-linkFocusOutlineWidth, var(--k-controlOutlineWidth, 2px)) solid var(--k-linkFocusOutlineColor, var(--k-color-line-accent-bold, #484848)));
 }
 .react-ui-Link__disabled {
   box-shadow: none;
@@ -1442,7 +1442,7 @@ button.react-ui-MenuItem__root {
   }
   .react-ui-Link__root:hover {
     text-decoration-color: currentColor;
-    text-decoration-style: var(--k-linkHoverTextDecorationStyle, solid);
+    text-decoration-style: var(--k-linkHoverTextDecorationStyle, var(--k-linkTextDecorationStyle, solid));
   }
 }
 @supports not (text-decoration-color: color-mix(in srgb, currentColor 50%, transparent)) {
@@ -1453,7 +1453,7 @@ button.react-ui-MenuItem__root {
     animation-fill-mode: forwards !important;
   }
   .react-ui-Link__root:hover {
-    text-decoration-style: var(--k-linkHoverTextDecorationStyle, solid);
+    text-decoration-style: var(--k-linkHoverTextDecorationStyle, var(--k-linkTextDecorationStyle, solid));
     animation: none !important;
   }
 }
@@ -1503,10 +1503,10 @@ button.react-ui-MenuItem__root {
   right: 0;
 }
 .react-ui-Button__outlineWarning {
-  box-shadow: 0 0 0 var(--k-btnOutlineWidth, 2px) var(--k-btnBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00)), inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnInsetColor, var(--k-color-surface-base, #ffffff));
+  box-shadow: 0 0 0 var(--k-btnOutlineWidth, var(--k-controlOutlineWidth, 2px)) var(--k-btnBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00)), inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnInsetColor, var(--k-color-surface-base, #ffffff));
 }
 .react-ui-Button__outlineError {
-  box-shadow: 0 0 0 var(--k-btnOutlineWidth, 2px) var(--k-btnBorderColorError, var(--k-color-line-error-bold, #d6192a)), inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnInsetColor, var(--k-color-surface-base, #ffffff));
+  box-shadow: 0 0 0 var(--k-btnOutlineWidth, var(--k-controlOutlineWidth, 2px)) var(--k-btnBorderColorError, var(--k-color-line-error-bold, #d6192a)), inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnInsetColor, var(--k-color-surface-base, #ffffff));
 }
 .react-ui-Button__outlineLink {
   cursor: default;
@@ -1524,24 +1524,24 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Button__sizeSmall {
   border-radius: var(--k-btnBorderRadiusSmall, 8px);
-  font-size: var(--k-btnFontSizeSmall, 14px);
+  font-size: var(--k-btnFontSizeSmall, var(--k-fontSizeSmall, 14px));
   box-sizing: border-box;
-  padding: var(--k-btnPaddingYSmall, 5px) var(--k-btnPaddingXSmall, 12px) var(--k-btnPaddingYSmall, 5px);
-  line-height: var(--k-btnLineHeightSmall, 20px);
+  padding: var(--k-btnPaddingYSmall, var(--k-controlPaddingYSmall, 5px)) var(--k-btnPaddingXSmall, 12px) var(--k-btnPaddingYSmall, var(--k-controlPaddingYSmall, 5px));
+  line-height: var(--k-btnLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-Button__sizeMedium {
   border-radius: var(--k-btnBorderRadiusMedium, 8px);
-  font-size: var(--k-btnFontSizeMedium, 16px);
+  font-size: var(--k-btnFontSizeMedium, var(--k-fontSizeMedium, 16px));
   box-sizing: border-box;
-  padding: var(--k-btnPaddingYMedium, 8px) var(--k-btnPaddingXMedium, 16px) var(--k-btnPaddingYMedium, 8px);
-  line-height: var(--k-btnLineHeightMedium, 22px);
+  padding: var(--k-btnPaddingYMedium, var(--k-controlPaddingYMedium, 8px)) var(--k-btnPaddingXMedium, 16px) var(--k-btnPaddingYMedium, var(--k-controlPaddingYMedium, 8px));
+  line-height: var(--k-btnLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-Button__sizeLarge {
   border-radius: var(--k-btnBorderRadiusLarge, 8px);
-  font-size: var(--k-btnFontSizeLarge, 18px);
+  font-size: var(--k-btnFontSizeLarge, var(--k-fontSizeLarge, 18px));
   box-sizing: border-box;
-  padding: var(--k-btnPaddingYLarge, 11px) var(--k-btnPaddingXLarge, 20px) var(--k-btnPaddingYLarge, 11px);
-  line-height: var(--k-btnLineHeightLarge, 24px);
+  padding: var(--k-btnPaddingYLarge, var(--k-controlPaddingYLarge, 11px)) var(--k-btnPaddingXLarge, 20px) var(--k-btnPaddingYLarge, var(--k-controlPaddingYLarge, 11px));
+  line-height: var(--k-btnLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-Button__sizeSmallWithIcon {
   padding-left: var(--k-btnWithIconPaddingSmall, 8px);
@@ -1579,7 +1579,7 @@ button.react-ui-MenuItem__root {
   border: none;
   box-shadow: none;
   white-space: nowrap;
-  color: var(--k-btnLinkColor, var(--k-color-text-accent-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-btnLinkColor, var(--k-linkColor, var(--k-color-text-accent-heavy, rgba(0, 0, 0, 0.88))));
   display: inline;
   margin: 0;
   padding: 0 !important;
@@ -1592,8 +1592,8 @@ button.react-ui-MenuItem__root {
   margin: -1px 0 -2px;
 }
 .react-ui-Button__linkFocus {
-  color: var(--k-btnLinkColor, var(--k-color-text-accent-heavy, rgba(0, 0, 0, 0.88)));
-  text-decoration: var(--k-btnLinkHoverTextDecoration, none);
+  color: var(--k-btnLinkColor, var(--k-linkColor, var(--k-color-text-accent-heavy, rgba(0, 0, 0, 0.88))));
+  text-decoration: var(--k-btnLinkHoverTextDecoration, var(--k-linkHoverTextDecoration, none));
 }
 .react-ui-Button__linkDisabled {
   cursor: default;
@@ -1626,46 +1626,46 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__default {
   background-color: var(--k-btnDefaultBg, #fff);
   background-image: linear-gradient(var(--k-btnDefaultBgStart, none), var(--k-btnDefaultBgEnd, none));
-  color: var(--k-btnDefaultTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  color: var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
 }
 .react-ui-Button__accent {
   background-color: var(--k-btnPrimaryBg, var(--k-color-shape-bold-accent, #3d3d3d));
   background-image: linear-gradient(var(--k-btnPrimaryBgStart, none), var(--k-btnPrimaryBgEnd, none));
   color: var(--k-btnPrimaryTextColor, var(--k-color-text-on-accent-bold-heavy, rgba(255, 255, 255, 0.96)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPrimaryBorderColor, var(--k-color-shape-bold-accent, #3d3d3d));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPrimaryBorderColor, var(--k-btnPrimaryBg, var(--k-color-shape-bold-accent, #3d3d3d)));
 }
 .react-ui-Button__success {
   background-color: var(--k-btnSuccessBg, var(--k-color-shape-bold-success, #00a948));
   background-image: linear-gradient(var(--k-btnSuccessBgStart, none), var(--k-btnSuccessBgEnd, none));
   color: var(--k-btnSuccessTextColor, var(--k-color-text-const-heavy-white, rgba(255, 255, 255, 0.96)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnSuccessBorderColor, var(--k-color-shape-bold-success, #00a948));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnSuccessBorderColor, var(--k-btnSuccessBg, var(--k-color-shape-bold-success, #00a948)));
 }
 .react-ui-Button__danger {
   background-color: var(--k-btnDangerBg, var(--k-color-shape-bold-error, #f63b40));
   background-image: linear-gradient(var(--k-btnDangerBgStart, none), var(--k-btnDangerBgEnd, none));
   color: var(--k-btnDangerTextColor, var(--k-color-text-const-heavy-white, rgba(255, 255, 255, 0.96)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDangerBorderColor, var(--k-color-shape-bold-error, #f63b40));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDangerBorderColor, var(--k-btnDangerBg, var(--k-color-shape-bold-error, #f63b40)));
 }
 .react-ui-Button__pay {
   background-color: var(--k-btnPayBg, var(--k-color-shape-bold-warning, #ffbe3d));
   background-image: linear-gradient(var(--k-btnPayBgStart, none), var(--k-btnPayBgEnd, none));
   color: var(--k-btnPayTextColor, var(--k-color-text-const-heavy-black, rgba(0, 0, 0, 0.88)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPayBorderColor, var(--k-color-shape-bold-warning, #ffbe3d));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPayBorderColor, var(--k-btnPayBg, var(--k-color-shape-bold-warning, #ffbe3d)));
 }
 .react-ui-Button__text {
   background-color: var(--k-btnTextBg, transparent);
-  color: var(--k-btnTextTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnTextBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  color: var(--k-btnTextTextColor, var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnTextBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
 }
 .react-ui-Button__outline {
   background-color: var(--k-btnBacklessBg, transparent);
-  color: var(--k-btnBacklessTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  color: var(--k-btnBacklessTextColor, var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
 }
 .react-ui-Button__fill {
   background-color: var(--k-btnFillBg, var(--k-color-shape-other-base, #ffffff));
-  color: var(--k-btnDefaultTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   box-shadow: 0 0 0  ;
 }
 .react-ui-Button__caption {
@@ -1679,7 +1679,7 @@ button.react-ui-MenuItem__root {
   box-sizing: border-box;
   display: inline-block;
   line-height: normal;
-  padding: var(--k-btnBorderWidth, 1px);
+  padding: var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px));
 }
 .react-ui-Button__wrapSmall {
   height: var(--k-btnHeightSmall, 32px);
@@ -1720,7 +1720,7 @@ button.react-ui-MenuItem__root {
   visibility: hidden;
 }
 .react-ui-Button__link-2 {
-  color: var(--k-btnLinkActiveColor, var(--k-color-text-accent-heavy-pressed, rgba(0, 0, 0, 0.96)));
+  color: var(--k-btnLinkActiveColor, var(--k-linkActiveColor, var(--k-color-text-accent-heavy-pressed, rgba(0, 0, 0, 0.96))));
 }
 .react-ui-Button__withArrowIconRightSmall {
   padding-right: calc(var(--k-btnIconSizeSmall, 16px) + var(--k-btnWithIconPaddingSmall, 8px) + var(--k-btnWithIconPaddingSmall, 8px));
@@ -1746,28 +1746,28 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Button__checked {
   background-image: none;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultCheckedBorderColor, var(--k-color-shape-bold-accent, #3d3d3d)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultCheckedBorderColor, var(--k-btnCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d))) !important;
   background-color: var(--k-btnCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d)) !important;
   color: var(--k-btnCheckedTextColor, var(--k-color-text-on-accent-bold-heavy, rgba(255, 255, 255, 0.96))) !important;
 }
 .react-ui-Button__disabled {
   cursor: default;
   pointer-events: none;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
   background-image: none;
   background-color: var(--k-btnDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
-  color: var(--k-btnDisabledTextColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-btnDisabledTextColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Button__disabledWithoutOutline {
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
 }
 .react-ui-Button__checkedDisabled {
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnCheckedDisabledBorderColor, var(--k-color-shape-other-accent-bold-disabled, rgba(0, 0, 0, 0.32)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnCheckedDisabledBorderColor, var(--k-btnCheckedDisabledBg, var(--k-color-shape-other-accent-bold-disabled, rgba(0, 0, 0, 0.32))));
   background-color: var(--k-btnCheckedDisabledBg, var(--k-color-shape-other-accent-bold-disabled, rgba(0, 0, 0, 0.32)));
   color: var(--k-btnCheckedDisabledColor, var(--k-color-text-inverted-neutral-soft, rgba(255, 255, 255, 0.64)));
 }
 .react-ui-Button__backlessDisabled {
-  box-shadow: 0 0 0 1px var(--k-btnBacklessDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  box-shadow: 0 0 0 1px var(--k-btnBacklessDisabledBorderColor, var(--k-btnDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))));
   background-color: transparent;
 }
 .react-ui-Button__textDisabled {
@@ -1816,28 +1816,28 @@ button.react-ui-MenuItem__root {
   color: var(--k-btnIconColor);
 }
 .react-ui-Button__link:hover:enabled, .react-ui-Button__link:active:enabled {
-  color: var(--k-btnLinkHoverColor, var(--k-color-text-accent-heavy-hover, rgba(0, 0, 0, 0.96)));
-  text-decoration: var(--k-btnLinkHoverTextDecoration, none);
+  color: var(--k-btnLinkHoverColor, var(--k-linkHoverColor, var(--k-color-text-accent-heavy-hover, rgba(0, 0, 0, 0.96))));
+  text-decoration: var(--k-btnLinkHoverTextDecoration, var(--k-linkHoverTextDecoration, none));
 }
 .react-ui-Button__link:active:enabled {
-  color: var(--k-btnLinkActiveColor, var(--k-color-text-accent-heavy-pressed, rgba(0, 0, 0, 0.96)));
+  color: var(--k-btnLinkActiveColor, var(--k-linkActiveColor, var(--k-color-text-accent-heavy-pressed, rgba(0, 0, 0, 0.96))));
 }
 .react-ui-Button__linkDisabled, .react-ui-Button__linkDisabled:hover:enabled, .react-ui-Button__linkDisabled:active:enabled {
-  color: var(--k-btnLinkDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-btnLinkDisabledColor, var(--k-linkDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Button__default:enabled:hover .react-ui-button-arrow svg, .react-ui-Button__default:enabled .react-ui-button-arrow svg {
-  color: var(--k-btnDefaultTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-Button__default:hover {
   background-color: var(--k-btnDefaultHoverBg, #f2f2f2);
   background-image: linear-gradient(var(--k-btnDefaultHoverBgStart, none), var(--k-btnDefaultHoverBgEnd, none));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultHoverBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))), 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultHoverBg, #f2f2f2);
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultHoverBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)))), 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultHoverBg, #f2f2f2);
   color: var(--k-btnDefaultHoverTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
 }
 .react-ui-Button__default:active, .react-ui-Button__default:active:hover {
   background-image: none !important;
   background-color: var(--k-btnDefaultActiveBg, #e4e4e4) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultActiveBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))), 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultActiveBg, #e4e4e4) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultActiveBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)))), 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultActiveBg, #e4e4e4) !important;
 }
 .react-ui-Button__default:active .react-ui-button-inner-shadow, .react-ui-Button__default:active:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnDefaultActiveShadow, none);
@@ -1848,13 +1848,13 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__accent:hover {
   background-color: var(--k-btnPrimaryHoverBg, var(--k-color-shape-bold-accent-hover, #292929));
   background-image: linear-gradient(var(--k-btnPrimaryHoverBgStart, none), var(--k-btnPrimaryHoverBgEnd, none));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPrimaryHoverBorderColor, var(--k-color-shape-bold-accent-hover, #292929));
-  color: var(--k-btnPrimaryHoverTextColor, var(--k-color-text-on-accent-bold-heavy, rgba(255, 255, 255, 0.96)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPrimaryHoverBorderColor, var(--k-btnPrimaryHoverBg, var(--k-color-shape-bold-accent-hover, #292929)));
+  color: var(--k-btnPrimaryHoverTextColor, var(--k-btnPrimaryTextColor, var(--k-color-text-on-accent-bold-heavy, rgba(255, 255, 255, 0.96))));
 }
 .react-ui-Button__accent:active, .react-ui-Button__accent:active:hover {
   background-image: none !important;
   background-color: var(--k-btnPrimaryActiveBg, var(--k-color-shape-bold-accent-pressed, #161616)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPrimaryActiveBorderColor, var(--k-color-shape-bold-accent-pressed, #161616)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPrimaryActiveBorderColor, var(--k-btnPrimaryActiveBg, var(--k-color-shape-bold-accent-pressed, #161616))) !important;
 }
 .react-ui-Button__accent:active .react-ui-button-inner-shadow, .react-ui-Button__accent:active:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnPrimaryActiveShadow, none);
@@ -1865,13 +1865,13 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__success:hover {
   background-color: var(--k-btnSuccessHoverBg, var(--k-color-shape-bold-success-hover, #009b41));
   background-image: linear-gradient(var(--k-btnSuccessHoverBgStart, none), var(--k-btnSuccessHoverBgEnd, none));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnSuccessHoverBorderColor, var(--k-color-shape-bold-success-hover, #009b41));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnSuccessHoverBorderColor, var(--k-btnSuccessHoverBg, var(--k-color-shape-bold-success-hover, #009b41)));
   color: var(--k-btnSuccessHoverTextColor, var(--k-color-text-const-heavy-white, rgba(255, 255, 255, 0.96)));
 }
 .react-ui-Button__success:active, .react-ui-Button__success:active:hover {
   background-image: none !important;
   background-color: var(--k-btnSuccessActiveBg, var(--k-color-shape-bold-success-pressed, #178b3f)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnSuccessActiveBorderColor, var(--k-color-shape-bold-success-pressed, #178b3f)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnSuccessActiveBorderColor, var(--k-btnSuccessActiveBg, var(--k-color-shape-bold-success-pressed, #178b3f))) !important;
 }
 .react-ui-Button__success:active .react-ui-button-inner-shadow, .react-ui-Button__success:active:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnSuccessActiveShadow, none);
@@ -1882,13 +1882,13 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__danger:hover {
   background-color: var(--k-btnDangerHoverBg, var(--k-color-shape-bold-error-hover, #e62b34));
   background-image: linear-gradient(var(--k-btnDangerHoverBgStart, none), var(--k-btnDangerHoverBgEnd, none));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDangerHoverBorderColor, var(--k-color-shape-bold-error-hover, #e62b34));
-  color: var(--k-btnDangerHoverTextColor, var(--k-color-text-const-heavy-white, rgba(255, 255, 255, 0.96)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDangerHoverBorderColor, var(--k-btnDangerHoverBg, var(--k-color-shape-bold-error-hover, #e62b34)));
+  color: var(--k-btnDangerHoverTextColor, var(--k-btnDangerTextColor, var(--k-color-text-const-heavy-white, rgba(255, 255, 255, 0.96))));
 }
 .react-ui-Button__danger:active, .react-ui-Button__danger:active:hover {
   background-image: none !important;
   background-color: var(--k-btnDangerActiveBg, var(--k-color-shape-bold-error-pressed, #cd3235)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDangerActiveBorderColor, var(--k-color-shape-bold-error-pressed, #cd3235)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDangerActiveBorderColor, var(--k-btnDangerActiveBg, var(--k-color-shape-bold-error-pressed, #cd3235))) !important;
 }
 .react-ui-Button__danger:active .react-ui-button-inner-shadow, .react-ui-Button__danger:active:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnDangerActiveShadow, none);
@@ -1899,13 +1899,13 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__pay:hover {
   background-color: var(--k-btnPayHoverBg, var(--k-color-shape-bold-warning-hover, #fdaa00));
   background-image: linear-gradient(var(--k-btnPayHoverBgStart, none), var(--k-btnPayHoverBgEnd, none));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPayHoverBorderColor, var(--k-color-shape-bold-warning-hover, #fdaa00));
-  color: var(--k-btnPayHoverTextColor, var(--k-color-text-const-heavy-black, rgba(0, 0, 0, 0.88)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPayHoverBorderColor, var(--k-btnPayHoverBg, var(--k-color-shape-bold-warning-hover, #fdaa00)));
+  color: var(--k-btnPayHoverTextColor, var(--k-btnPayTextColor, var(--k-color-text-const-heavy-black, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-Button__pay:active, .react-ui-Button__pay:active:hover {
   background-image: none !important;
   background-color: var(--k-btnPayActiveBg, var(--k-color-shape-bold-warning-pressed, #ec9e32)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPayActiveBorderColor, var(--k-color-shape-bold-warning-pressed, #ec9e32)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPayActiveBorderColor, var(--k-btnPayActiveBg, var(--k-color-shape-bold-warning-pressed, #ec9e32))) !important;
 }
 .react-ui-Button__pay:active .react-ui-button-inner-shadow, .react-ui-Button__pay:active:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnPayActiveShadow, none);
@@ -1914,33 +1914,33 @@ button.react-ui-MenuItem__root {
   box-shadow: none;
 }
 .react-ui-Button__text:enabled:hover .react-ui-button-arrow svg, .react-ui-Button__text:enabled .react-ui-button-arrow svg {
-  color: var(--k-btnTextTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-btnTextTextColor, var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
 }
 .react-ui-Button__text:hover {
   background-color: var(--k-btnTextHoverBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnTextHoverBorderColor, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
-  color: var(--k-btnTextHoverTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnTextHoverBorderColor, var(--k-btnTextHoverBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06))));
+  color: var(--k-btnTextHoverTextColor, var(--k-btnTextTextColor, var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))))));
 }
 .react-ui-Button__text:active, .react-ui-Button__text:active:hover {
   background-image: none !important;
   background-color: var(--k-btnTextActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnTextActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnTextActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
 }
 .react-ui-Button__outline:enabled:hover .react-ui-button-arrow svg, .react-ui-Button__outline:enabled .react-ui-button-arrow svg {
-  color: var(--k-btnBacklessTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-btnBacklessTextColor, var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
 }
 .react-ui-Button__outline:hover {
   background-color: var(--k-btnBacklessHoverBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessHoverBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))), 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessHoverBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
-  color: var(--k-btnBacklessHoverTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessHoverBorderColor, var(--k-btnBacklessBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))))), 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessHoverBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
+  color: var(--k-btnBacklessHoverTextColor, var(--k-btnBacklessTextColor, var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))))));
 }
 .react-ui-Button__outline:active, .react-ui-Button__outline:active:hover {
   background-image: none !important;
   background-color: var(--k-btnBacklessActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessActiveBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))), 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessActiveBorderColor, var(--k-btnBacklessBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))))), 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
 }
 .react-ui-Button__fill:enabled:hover .react-ui-button-arrow svg, .react-ui-Button__fill:enabled .react-ui-button-arrow svg {
-  color: var(--k-btnDefaultTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-btnDefaultTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-Button__fill:hover {
   background-color: var(--k-btnFillHoverBg, var(--k-color-shape-other-base-hover, rgba(255, 255, 255, 0.64)));
@@ -1955,7 +1955,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__default-2, .react-ui-Button__default-2:hover {
   background-image: none !important;
   background-color: var(--k-btnDefaultActiveBg, #e4e4e4) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultActiveBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))), 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultActiveBg, #e4e4e4) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultActiveBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)))), 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultActiveBg, #e4e4e4) !important;
 }
 .react-ui-Button__default-2 .react-ui-button-inner-shadow, .react-ui-Button__default-2:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnDefaultActiveShadow, none);
@@ -1963,7 +1963,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__accent-2, .react-ui-Button__accent-2:hover {
   background-image: none !important;
   background-color: var(--k-btnPrimaryActiveBg, var(--k-color-shape-bold-accent-pressed, #161616)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPrimaryActiveBorderColor, var(--k-color-shape-bold-accent-pressed, #161616)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPrimaryActiveBorderColor, var(--k-btnPrimaryActiveBg, var(--k-color-shape-bold-accent-pressed, #161616))) !important;
 }
 .react-ui-Button__accent-2 .react-ui-button-inner-shadow, .react-ui-Button__accent-2:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnPrimaryActiveShadow, none);
@@ -1971,7 +1971,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__success-2, .react-ui-Button__success-2:hover {
   background-image: none !important;
   background-color: var(--k-btnSuccessActiveBg, var(--k-color-shape-bold-success-pressed, #178b3f)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnSuccessActiveBorderColor, var(--k-color-shape-bold-success-pressed, #178b3f)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnSuccessActiveBorderColor, var(--k-btnSuccessActiveBg, var(--k-color-shape-bold-success-pressed, #178b3f))) !important;
 }
 .react-ui-Button__success-2 .react-ui-button-inner-shadow, .react-ui-Button__success-2:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnSuccessActiveShadow, none);
@@ -1979,7 +1979,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__danger-2, .react-ui-Button__danger-2:hover {
   background-image: none !important;
   background-color: var(--k-btnDangerActiveBg, var(--k-color-shape-bold-error-pressed, #cd3235)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDangerActiveBorderColor, var(--k-color-shape-bold-error-pressed, #cd3235)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDangerActiveBorderColor, var(--k-btnDangerActiveBg, var(--k-color-shape-bold-error-pressed, #cd3235))) !important;
 }
 .react-ui-Button__danger-2 .react-ui-button-inner-shadow, .react-ui-Button__danger-2:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnDangerActiveShadow, none);
@@ -1987,7 +1987,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__pay-2, .react-ui-Button__pay-2:hover {
   background-image: none !important;
   background-color: var(--k-btnPayActiveBg, var(--k-color-shape-bold-warning-pressed, #ec9e32)) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnPayActiveBorderColor, var(--k-color-shape-bold-warning-pressed, #ec9e32)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnPayActiveBorderColor, var(--k-btnPayActiveBg, var(--k-color-shape-bold-warning-pressed, #ec9e32))) !important;
 }
 .react-ui-Button__pay-2 .react-ui-button-inner-shadow, .react-ui-Button__pay-2:hover .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnPayActiveShadow, none);
@@ -1995,12 +1995,12 @@ button.react-ui-MenuItem__root {
 .react-ui-Button__text-2, .react-ui-Button__text-2:hover {
   background-image: none !important;
   background-color: var(--k-btnTextActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnTextActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnTextActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
 }
 .react-ui-Button__outline-2, .react-ui-Button__outline-2:hover {
   background-image: none !important;
   background-color: var(--k-btnBacklessActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessActiveBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))), 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnBacklessActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessActiveBorderColor, var(--k-btnBacklessBorderColor, var(--k-btnDefaultBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))))), 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnBacklessActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
 }
 .react-ui-Button__fill-2, .react-ui-Button__fill-2:hover {
   background-image: none !important;
@@ -2008,7 +2008,7 @@ button.react-ui-MenuItem__root {
   box-shadow: 0 0 0   !important;
 }
 .react-ui-Button__focus, .react-ui-Button__focus:hover:enabled, .react-ui-Button__focus:active:enabled, .react-ui-Button__focus:active:hover:enabled {
-  box-shadow: inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-btnFocusShadowWidth, 2px) var(--k-btnBorderColorFocus, var(--k-color-line-accent-bold, #484848)) !important;
+  box-shadow: inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-btnFocusShadowWidth, 2px) var(--k-btnBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848))) !important;
 }
 .react-ui-Button__checked .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnCheckedShadow, none);
@@ -2021,7 +2021,7 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Button__checked:hover:enabled, .react-ui-Button__checked:active:enabled, .react-ui-Button__checked:hover:active:enabled {
   background-image: none;
-  box-shadow: 0 0 0 var(--k-btnBorderWidth, 1px) var(--k-btnDefaultCheckedBorderColor, var(--k-color-shape-bold-accent, #3d3d3d)) !important;
+  box-shadow: 0 0 0 var(--k-btnBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-btnDefaultCheckedBorderColor, var(--k-btnCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d))) !important;
   background-color: var(--k-btnCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d)) !important;
   color: var(--k-btnCheckedTextColor, var(--k-color-text-on-accent-bold-heavy, rgba(255, 255, 255, 0.96))) !important;
 }
@@ -2035,8 +2035,8 @@ button.react-ui-MenuItem__root {
   color: var(--k-btnCheckedTextColor, var(--k-color-text-on-accent-bold-heavy, rgba(255, 255, 255, 0.96))) !important;
 }
 .react-ui-Button__checkedFocused:hover:enabled, .react-ui-Button__checkedFocused:hover:active:enabled {
-  box-shadow: inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-btnFocusShadowWidth, 2px) var(--k-btnBorderColorFocus, var(--k-color-line-accent-bold, #484848)) !important;
-  border-color: var(--k-btnBorderColorFocus, var(--k-color-line-accent-bold, #484848)) !important;
+  box-shadow: inset 0 0 0 var(--k-btnInsetWidth, 1px) var(--k-btnOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-btnFocusShadowWidth, 2px) var(--k-btnBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848))) !important;
+  border-color: var(--k-btnBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848))) !important;
 }
 .react-ui-Button__checkedDisabled .react-ui-button-inner-shadow {
   box-shadow: var(--k-btnCheckedDisabledShadow, none);
@@ -2078,16 +2078,16 @@ button.react-ui-MenuItem__root {
   margin-right: var(--k-btnIconGapSmallLeft, 4px);
 }
 .react-ui-ButtonIcon__iconSmallRight {
-  margin-left: var(--k-btnIconGapSmallRight, 4px);
+  margin-left: var(--k-btnIconGapSmallRight, var(--k-btnIconGapSmallLeft, 4px));
 }
 .react-ui-ButtonIcon__iconMedium {
   width: var(--k-btnIconSizeMedium, 20px);
 }
 .react-ui-ButtonIcon__iconMediumLeft {
-  margin-right: var(--k-btnIconGapMediumRight, 6px);
+  margin-right: var(--k-btnIconGapMediumRight, var(--k-btnIconGapMediumLeft, 6px));
 }
 .react-ui-ButtonIcon__iconMediumRight {
-  margin-left: var(--k-btnIconGapMediumRight, 6px);
+  margin-left: var(--k-btnIconGapMediumRight, var(--k-btnIconGapMediumLeft, 6px));
 }
 .react-ui-ButtonIcon__iconLarge {
   width: var(--k-btnIconSizeLarge, 24px);
@@ -2096,30 +2096,30 @@ button.react-ui-MenuItem__root {
   margin-right: var(--k-btnIconGapLargeLeft, 8px);
 }
 .react-ui-ButtonIcon__iconLargeRight {
-  margin-left: var(--k-btnIconGapLargeRight, 8px);
+  margin-left: var(--k-btnIconGapLargeRight, var(--k-btnIconGapLargeLeft, 8px));
 }
 .react-ui-ButtonIcon__iconNoMargin {
   margin-right: 0;
   margin-left: 0;
 }
 .react-ui-ButtonIcon__iconLeftLink {
-  margin-right: var(--k-btnLinkIconMarginRight, 4px);
+  margin-right: var(--k-btnLinkIconMarginRight, var(--k-linkIconMarginRight, 4px));
 }
 .react-ui-ButtonIcon__iconRightLink {
-  margin-left: var(--k-btnLinkIconMarginLeft, 4px);
+  margin-left: var(--k-btnLinkIconMarginLeft, var(--k-linkIconMarginRight, 4px));
 }
 .react-ui-ButtonIcon__icon::before {
   content: '\200B';
 }
 /* components/Calendar/Calendar.css.ts */
 .react-ui-Calendar__root {
-  background: var(--k-calendarBg, var(--k-color-surface-high, #ffffff));
+  background: var(--k-calendarBg, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   box-sizing: content-box;
   border-radius: var(--k-calendarBorderRadius, 8px);
   color: var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
   display: block;
   padding: 0 var(--k-calendarPaddingX, 18px);
-  width: calc(var(--k-calendarCellWidth, 32px) * 7);
+  width: calc(var(--k-calendarCellWidth, var(--k-calendarCellHeight, 32px)) * 7);
   touch-action: none;
 }
 .react-ui-Calendar__wrapper {
@@ -2128,12 +2128,12 @@ button.react-ui-MenuItem__root {
   overflow: hidden;
 }
 .react-ui-Calendar__separator {
-  border-bottom: var(--k-calendarBottomSeparatorBorder, 1px solid var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  border-bottom: var(--k-calendarBottomSeparatorBorder, var(--k-calendarBottomSeparatorBorderWidth, 1px) solid var(--k-calendarBottomSeparatorBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))));
   margin: 0 var(--k-calendarMonthTitleMarginX, 6px);
 }
 /* components/Calendar/DayCellView.css.ts */
 .react-ui-DayCellView__cell {
-  flex: 1 1 var(--k-calendarCellWidth, 32px);
+  flex: 1 1 var(--k-calendarCellWidth, var(--k-calendarCellHeight, 32px));
   height: var(--k-calendarCellHeight, 32px);
 }
 .react-ui-DayCellView__day {
@@ -2231,7 +2231,7 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-MonthView__month {
   position: absolute;
-  width: calc(var(--k-calendarCellWidth, 32px) * 7);
+  width: calc(var(--k-calendarCellWidth, var(--k-calendarCellHeight, 32px)) * 7);
 }
 .react-ui-MonthView__monthMobile {
   width: 100%;
@@ -2240,7 +2240,7 @@ button.react-ui-MenuItem__root {
   position: relative;
 }
 .react-ui-MonthView__headerSticky {
-  background-color: var(--k-calendarMonthHeaderStickedBgColor, var(--k-color-surface-high, #ffffff));
+  background-color: var(--k-calendarMonthHeaderStickedBgColor, var(--k-calendarBg, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff)))));
   z-index: 2;
 }
 .react-ui-MonthView__monthTitle {
@@ -2277,7 +2277,7 @@ button.react-ui-MenuItem__root {
   text-overflow: ellipsis;
 }
 .react-ui-Select__arrowWrap {
-  color: var(--k-selectMenuArrowColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
+  color: var(--k-selectMenuArrowColor, var(--k-btnMenuArrowColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56))));
   flex-shrink: 0;
 }
 .react-ui-Select__label {
@@ -2290,19 +2290,19 @@ button.react-ui-MenuItem__root {
   margin: 1px 4px 4px;
 }
 .react-ui-Select__leftIconSmall {
-  margin-right: var(--k-selectIconGapSmall, 4px);
+  margin-right: var(--k-selectIconGapSmall, var(--k-inputIconGapSmall, 4px));
   width: var(--k-btnIconSizeSmall, 16px);
 }
 .react-ui-Select__leftIconMedium {
-  margin-right: var(--k-selectIconGapMedium, 6px);
+  margin-right: var(--k-selectIconGapMedium, var(--k-inputIconGapMedium, 6px));
   width: var(--k-btnIconSizeMedium, 20px);
 }
 .react-ui-Select__leftIconLarge {
-  margin-right: var(--k-selectIconGapLarge, 8px);
+  margin-right: var(--k-selectIconGapLarge, var(--k-inputIconGapLarge, 8px));
   width: var(--k-btnIconSizeLarge, 24px);
 }
 .react-ui-Select__leftIconLink {
-  margin-right: var(--k-btnLinkIconMarginRight, 4px);
+  margin-right: var(--k-btnLinkIconMarginRight, var(--k-linkIconMarginRight, 4px));
 }
 .react-ui-Select__selectButtonContainer {
   width: 100%;
@@ -2310,18 +2310,18 @@ button.react-ui-MenuItem__root {
   justify-content: space-between;
 }
 .react-ui-Select__arrowDisabled {
-  color: var(--k-selectMenuArrowColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-selectMenuArrowColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Select__customUsePlaceholder {
   color: inherit;
   opacity: 0.7;
 }
 .react-ui-Select__placeholderDisabled {
-  color: var(--k-selectPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-selectPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 /* internal/DateSelect/DateSelect.css.ts */
 .react-ui-DateSelect__root {
-  color: var(--k-dateSelectTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-dateSelectTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   cursor: pointer;
   display: inline-flex;
   justify-content: space-between;
@@ -2345,13 +2345,13 @@ button.react-ui-MenuItem__root {
   position: relative;
 }
 .react-ui-DateSelect__root:hover {
-  color: var(--k-dateSelectLinkColor, var(--k-color-text-accent-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-dateSelectLinkColor, var(--k-linkColor, var(--k-color-text-accent-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-DateSelect__root .react-ui-select-arrow {
   transition: fill var(--k-transitionDuration, 100ms) var(--k-transitionTimingFunction, cubic-bezier(0.5, 1, 0.89, 1));
 }
 .react-ui-DateSelect__root:hover .react-ui-select-arrow {
-  fill: var(--k-dateSelectTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))) !important;
+  fill: var(--k-dateSelectTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))) !important;
 }
 /* components/Center/Center.css.ts */
 .react-ui-Center__root {
@@ -2394,18 +2394,18 @@ button.react-ui-MenuItem__root {
   position: relative;
 }
 .react-ui-Checkbox__rootSmall {
-  line-height: var(--k-checkboxLineHeightSmall, 20px);
-  font-size: var(--k-checkboxFontSizeSmall, 14px);
+  line-height: var(--k-checkboxLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  font-size: var(--k-checkboxFontSizeSmall, var(--k-fontSizeSmall, 14px));
   padding: var(--k-checkboxPaddingYSmall, 6px) var(--k-checkboxPaddingXSmall, 0);
 }
 .react-ui-Checkbox__rootMedium {
-  line-height: var(--k-checkboxLineHeightMedium, 22px);
-  font-size: var(--k-checkboxFontSizeMedium, 16px);
+  line-height: var(--k-checkboxLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
+  font-size: var(--k-checkboxFontSizeMedium, var(--k-fontSizeMedium, 16px));
   padding: var(--k-checkboxPaddingYMedium, 9px) var(--k-checkboxPaddingXMedium, 0);
 }
 .react-ui-Checkbox__rootLarge {
-  line-height: var(--k-checkboxLineHeightLarge, 24px);
-  font-size: var(--k-checkboxFontSizeLarge, 18px);
+  line-height: var(--k-checkboxLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
+  font-size: var(--k-checkboxFontSizeLarge, var(--k-fontSizeLarge, 18px));
   padding: var(--k-checkboxPaddingYLarge, 12px) var(--k-checkboxPaddingXLarge, 0);
 }
 .react-ui-Checkbox__rootDisableTextSelect {
@@ -2414,7 +2414,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Checkbox__boxWrapper {
   position: absolute;
   box-sizing: border-box;
-  padding: var(--k-checkboxBorderWidth, 1px);
+  padding: var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px));
   display: inline-block;
 }
 .react-ui-Checkbox__boxWrapperSmall {
@@ -2436,8 +2436,8 @@ button.react-ui-MenuItem__root {
   left: var(--k-checkboxPaddingXLarge, 0);
 }
 .react-ui-Checkbox__box {
-  color: var(--k-checkboxTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
-  box-shadow: var(--k-checkboxShadow, 0 0 0 1px var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  color: var(--k-checkboxTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
+  box-shadow: var(--k-checkboxShadow, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
   background: var(--k-checkboxBg, var(--k-color-shape-other-field, #ffffff));
   border-radius: var(--k-checkboxBorderRadius, 4px);
   height: 100%;
@@ -2451,23 +2451,23 @@ button.react-ui-MenuItem__root {
   z-index: -1;
 }
 .react-ui-Checkbox__boxWarning {
-  box-shadow: inset 0 0 0 1px var(--k-checkboxOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-checkboxOutlineWidth, 2px) var(--k-checkboxBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00)) !important;
+  box-shadow: inset 0 0 0 1px var(--k-checkboxOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-checkboxOutlineWidth, var(--k-controlOutlineWidth, 2px)) var(--k-checkboxBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00))) !important;
 }
 .react-ui-Checkbox__boxError {
-  box-shadow: inset 0 0 0 1px var(--k-checkboxOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-checkboxOutlineWidth, 2px) var(--k-checkboxBorderColorError, var(--k-color-line-error-bold, #d6192a)) !important;
+  box-shadow: inset 0 0 0 1px var(--k-checkboxOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-checkboxOutlineWidth, var(--k-controlOutlineWidth, 2px)) var(--k-checkboxBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a))) !important;
 }
 .react-ui-Checkbox__boxChecked {
   background: var(--k-checkboxCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d));
   color: var(--k-checkboxCheckedColor, var(--k-color-shape-inverted-neutral-heavy, #ffffff));
-  box-shadow: var(--k-checkboxCheckedShadow, 0 0 0 1px var(--k-color-shape-bold-accent, #3d3d3d));
+  box-shadow: var(--k-checkboxCheckedShadow, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-checkboxCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d)));
 }
 .react-ui-Checkbox__boxFocus {
-  box-shadow: inset 0 0 0 1px var(--k-checkboxOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-checkboxOutlineWidth, 2px) var(--k-checkboxBorderColorFocus, var(--k-color-line-accent-bold, #484848)) !important;
+  box-shadow: inset 0 0 0 1px var(--k-checkboxOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-checkboxOutlineWidth, var(--k-controlOutlineWidth, 2px)) var(--k-checkboxBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848))) !important;
 }
 .react-ui-Checkbox__boxDisabled {
-  box-shadow: var(--k-checkboxShadowDisabled, 0 0 0 1px var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))) !important;
+  box-shadow: var(--k-checkboxShadowDisabled, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))) !important;
   background: var(--k-checkboxBgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))) !important;
-  color: var(--k-checkboxTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-checkboxTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Checkbox__icon {
   position: absolute;
@@ -2483,7 +2483,7 @@ button.react-ui-MenuItem__root {
   color: transparent;
 }
 .react-ui-Checkbox__caption {
-  color: var(--k-checkboxTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-checkboxTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   padding-left: var(--k-checkboxCaptionGap, 8px);
 }
 .react-ui-Checkbox__captionWrapper {
@@ -2492,25 +2492,25 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Checkbox__subcaption {
   margin-top: 2px;
-  color: var(--k-checkboxCommentTextColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
+  color: var(--k-checkboxCommentTextColor, var(--k-commentTextColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56))));
 }
 .react-ui-Checkbox__subcaptionDisabled {
-  color: var(--k-checkboxTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-checkboxTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Checkbox__subcaptionSmall {
-  font-size: var(--k-checkboxCommentFontSizeSmall, 12px);
-  line-height: var(--k-checkboxCommentLineHeightSmall, 16px);
+  font-size: var(--k-checkboxCommentFontSizeSmall, var(--k-commentFontSizeSmall, 12px));
+  line-height: var(--k-checkboxCommentLineHeightSmall, var(--k-commentLineHeightSmall, 16px));
 }
 .react-ui-Checkbox__subcaptionMedium {
-  font-size: var(--k-checkboxCommentFontSizeMedium, 14px);
-  line-height: var(--k-checkboxCommentLineHeightMedium, 20px);
+  font-size: var(--k-checkboxCommentFontSizeMedium, var(--k-commentFontSizeMedium, 14px));
+  line-height: var(--k-checkboxCommentLineHeightMedium, var(--k-commentLineHeightMedium, 20px));
 }
 .react-ui-Checkbox__subcaptionLarge {
-  font-size: var(--k-checkboxCommentFontSizeLarge, 16px);
-  line-height: var(--k-checkboxCommentLineHeightLarge, 22px);
+  font-size: var(--k-checkboxCommentFontSizeLarge, var(--k-commentFontSizeLarge, 16px));
+  line-height: var(--k-checkboxCommentLineHeightLarge, var(--k-commentLineHeightLarge, 22px));
 }
 .react-ui-Checkbox__disabled {
-  color: var(--k-checkboxTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-checkboxTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
   cursor: default;
 }
 .react-ui-Checkbox__captionNoGap {
@@ -2526,10 +2526,10 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Checkbox__root:hover .react-ui-checkbox-box {
   background: var(--k-checkboxHoverBg, var(--k-color-shape-other-field-hover, #f2f2f2));
-  box-shadow: var(--k-checkboxShadowHover, 0 0 0 1px var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24)));
+  box-shadow: var(--k-checkboxShadowHover, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24)));
 }
 .react-ui-Checkbox__root:active .react-ui-checkbox-box {
-  box-shadow: var(--k-checkboxShadowActive, 0 0 0 1px var(--k-color-line-neutral-pale-pressed, rgba(0, 0, 0, 0.4)));
+  box-shadow: var(--k-checkboxShadowActive, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-color-line-neutral-pale-pressed, rgba(0, 0, 0, 0.4)));
   background: var(--k-checkboxActiveBg, var(--k-color-shape-other-field-pressed, #e4e4e4));
 }
 .react-ui-Checkbox__rootSmall::before {
@@ -2542,12 +2542,12 @@ button.react-ui-MenuItem__root {
   width: var(--k-checkboxBoxSizeLarge, 24px);
 }
 .react-ui-Checkbox__rootChecked:hover .react-ui-checkbox-box {
-  box-shadow: var(--k-checkboxCheckedHoverShadow, 0 0 0 1px var(--k-color-shape-bold-accent-hover, #292929));
+  box-shadow: var(--k-checkboxCheckedHoverShadow, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-checkboxCheckedHoverBg, var(--k-color-shape-bold-accent-hover, #292929)));
   background: var(--k-checkboxCheckedHoverBg, var(--k-color-shape-bold-accent-hover, #292929));
 }
 .react-ui-Checkbox__rootChecked:active .react-ui-checkbox-box {
   background: var(--k-checkboxCheckedActiveBg, var(--k-color-shape-bold-accent-pressed, #161616));
-  box-shadow: var(--k-checkboxCheckedActiveShadow, 0 0 0 1px var(--k-color-shape-bold-accent-pressed, #161616));
+  box-shadow: var(--k-checkboxCheckedActiveShadow, 0 0 0 var(--k-checkboxBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-checkboxCheckedActiveBg, var(--k-color-shape-bold-accent-pressed, #161616)));
 }
 /* internal/InputLikeText/InputLikeText.css.ts */
 .react-ui-InputLikeText__absolute {
@@ -2596,10 +2596,10 @@ button.react-ui-MenuItem__root {
   -webkit-appearance: none;
   background: var(--k-textareaBg, var(--k-color-shape-other-field, #ffffff));
   background-clip: var(--k-textareaBackgroundClip, padding-box);
-  border: var(--k-textareaBorderWidth, 1px) solid var(--k-textareaBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border: var(--k-textareaBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-textareaBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
   box-shadow: var(--k-textareaShadow, none);
   box-sizing: border-box;
-  color: var(--k-textareaColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-textareaColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -2633,7 +2633,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Textarea__counterContainer {
   position: absolute;
   top: 0;
-  border: var(--k-textareaBorderWidth, 1px) solid transparent;
+  border: var(--k-textareaBorderWidth, var(--k-controlBorderWidth, 1px)) solid transparent;
   box-sizing: content-box;
 }
 .react-ui-Textarea__counter {
@@ -2649,7 +2649,7 @@ button.react-ui-MenuItem__root {
   padding: var(--k-textareaCounterPaddingY, 2px) var(--k-textareaCounterPaddingX, 4px);
 }
 .react-ui-Textarea__counterError {
-  color: var(--k-textareaCounterErrorColor, var(--k-color-text-error-heavy, #c50220));
+  color: var(--k-textareaCounterErrorColor, var(--k-errorText, var(--k-color-text-error-heavy, #c50220)));
 }
 .react-ui-Textarea__counterHelp {
   margin-left: 4px;
@@ -2659,74 +2659,74 @@ button.react-ui-MenuItem__root {
   transition: none;
 }
 .react-ui-Textarea__rootSmall {
-  font-size: var(--k-textareaFontSizeSmall, 14px);
-  line-height: var(--k-textareaLineHeightSmall, 20px);
+  font-size: var(--k-textareaFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-textareaLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-Textarea__rootMedium {
-  font-size: var(--k-textareaFontSizeMedium, 16px);
-  line-height: var(--k-textareaLineHeightMedium, 22px);
+  font-size: var(--k-textareaFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-textareaLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-Textarea__rootLarge {
-  font-size: var(--k-textareaFontSizeLarge, 18px);
-  line-height: var(--k-textareaLineHeightLarge, 24px);
+  font-size: var(--k-textareaFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-textareaLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-Textarea__textareaSmall {
   min-height: var(--k-textareaMinHeightSmall, 32px);
-  padding: var(--k-textareaPaddingYSmall, 5px) var(--k-textareaPaddingXSmall, 7px);
+  padding: var(--k-textareaPaddingYSmall, var(--k-controlPaddingYSmall, 5px)) var(--k-textareaPaddingXSmall, 7px);
 }
 .react-ui-Textarea__textareaMedium {
   min-height: var(--k-textareaMinHeightMedium, 40px);
-  padding: var(--k-textareaPaddingYMedium, 8px) var(--k-textareaPaddingXMedium, 11px);
+  padding: var(--k-textareaPaddingYMedium, var(--k-controlPaddingYMedium, 8px)) var(--k-textareaPaddingXMedium, 11px);
 }
 .react-ui-Textarea__textareaLarge {
   min-height: var(--k-textareaMinHeightLarge, 48px);
-  padding: var(--k-textareaPaddingYLarge, 11px) var(--k-textareaPaddingXLarge, 15px);
+  padding: var(--k-textareaPaddingYLarge, var(--k-controlPaddingYLarge, 11px)) var(--k-textareaPaddingXLarge, 15px);
 }
 .react-ui-Textarea__disabled {
-  color: var(--k-textareaTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
-  background: var(--k-textareaDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
-  border-color: var(--k-textareaDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  color: var(--k-textareaTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
+  background: var(--k-textareaDisabledBg, var(--k-inputDisabledBg, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)))));
+  border-color: var(--k-textareaDisabledBorderColor, var(--k-borderColorDisabled, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))));
   box-shadow: none;
 }
 .react-ui-Textarea__error {
-  border-color: var(--k-textareaBorderColorError, var(--k-color-line-error-bold, #d6192a));
-  box-shadow: 0 0 0 var(--k-textareaBorderWidth, 1px) var(--k-textareaBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border-color: var(--k-textareaBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
+  box-shadow: 0 0 0 var(--k-textareaBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-textareaBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-Textarea__warning {
-  border-color: var(--k-textareaBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
-  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border-color: var(--k-textareaBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
+  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 .react-ui-Textarea__textarea:focus {
-  border-color: var(--k-textareaBorderColorFocus, var(--k-color-line-accent-bold, #484848));
-  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorFocus, var(--k-color-line-accent-bold, #484848));
+  border-color: var(--k-textareaBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
+  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   position: relative;
   z-index: 2;
 }
 .react-ui-Textarea__textarea:focus::placeholder {
-  color: var(--k-textareaPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
+  color: var(--k-textareaPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%)));
 }
 .react-ui-Textarea__textarea::placeholder {
-  color: var(--k-textareaPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-textareaPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Textarea__textarea:-moz-placeholder {
-  color: var(--k-textareaPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-textareaPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Textarea__textarea::-moz-placeholder {
-  color: var(--k-textareaPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-textareaPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Textarea__hovering:enabled:hover:not(:focus) {
-  border-color: var(--k-textareaBorderColorHover, var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24)));
+  border-color: var(--k-textareaBorderColorHover, var(--k-inputBorderColorHover, var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24))));
 }
 .react-ui-Textarea__disabled::placeholder {
-  color: var(--k-textareaPlaceholderColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-textareaPlaceholderColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Textarea__error:focus {
-  border-color: var(--k-textareaBorderColorError, var(--k-color-line-error-bold, #d6192a));
-  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border-color: var(--k-textareaBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
+  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-Textarea__warning:focus {
-  border-color: var(--k-textareaBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
-  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border-color: var(--k-textareaBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
+  box-shadow: 0 0 0 var(--k-textareaOutlineWidth, 1px) var(--k-textareaBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 /* internal/InternalTextareaWithLayout/InternalTextareaWithLayout.css.ts */
 .react-ui-InternalTextareaWithLayout__contentWrapper {
@@ -2734,31 +2734,31 @@ button.react-ui-MenuItem__root {
   align-items: flex-start;
 }
 .react-ui-InternalTextareaWithLayout__focus.react-ui-InternalTextareaWithLayout__focus {
-  background-color: var(--k-inputFocusedBg, var(--k-color-shape-other-field, #ffffff));
-  border-color: var(--k-inputBorderColorFocus, var(--k-color-line-accent-bold, #484848));
-  box-shadow: var(--k-inputFocusShadow, 0 0 0 calc(2px - 1px) var(--k-color-line-accent-bold, #484848));
+  background-color: var(--k-inputFocusedBg, var(--k-inputBg, var(--k-color-shape-other-field, #ffffff)));
+  border-color: var(--k-inputBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
+  box-shadow: var(--k-inputFocusShadow, 0 0 0 var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px)) var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   outline: none;
   z-index: 2;
 }
 /* components/MenuFooter/MenuFooter.css.ts */
 .react-ui-MenuFooter__root {
-  color: var(--k-menuFooterColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
+  color: var(--k-menuFooterColor, var(--k-menuHeaderColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56))));
   cursor: default;
 }
 .react-ui-MenuFooter__rootSmall {
-  font-size: var(--k-menuFooterFontSizeSmall, 12px);
-  line-height: var(--k-menuFooterLineHeightSmall, 16px);
-  padding: var(--k-menuFooterPaddingTopSmall, 4px) var(--k-menuFooterPaddingXSmall, 8px) var(--k-menuFooterPaddingBottomSmall, 12px) var(--k-menuFooterPaddingXSmall, 8px);
+  font-size: var(--k-menuFooterFontSizeSmall, var(--k-menuHeaderFontSizeSmall, 12px));
+  line-height: var(--k-menuFooterLineHeightSmall, var(--k-menuHeaderLineHeightSmall, 16px));
+  padding: var(--k-menuFooterPaddingTopSmall, var(--k-menuHeaderPaddingBottomSmall, 4px)) var(--k-menuFooterPaddingXSmall, var(--k-menuHeaderPaddingXSmall, 8px)) var(--k-menuFooterPaddingBottomSmall, var(--k-menuHeaderPaddingTopSmall, 12px)) var(--k-menuFooterPaddingXSmall, var(--k-menuHeaderPaddingXSmall, 8px));
 }
 .react-ui-MenuFooter__rootMedium {
-  font-size: var(--k-menuFooterFontSizeMedium, 14px);
-  line-height: var(--k-menuFooterLineHeightMedium, 20px);
-  padding: var(--k-menuFooterPaddingTopMedium, 6px) var(--k-menuFooterPaddingXMedium, 12px) var(--k-menuFooterPaddingBottomMedium, 14px) var(--k-menuFooterPaddingXMedium, 12px);
+  font-size: var(--k-menuFooterFontSizeMedium, var(--k-menuHeaderFontSizeMedium, 14px));
+  line-height: var(--k-menuFooterLineHeightMedium, var(--k-menuHeaderLineHeightMedium, 20px));
+  padding: var(--k-menuFooterPaddingTopMedium, var(--k-menuHeaderPaddingBottomMedium, 6px)) var(--k-menuFooterPaddingXMedium, var(--k-menuHeaderPaddingXMedium, 12px)) var(--k-menuFooterPaddingBottomMedium, var(--k-menuHeaderPaddingTopMedium, 14px)) var(--k-menuFooterPaddingXMedium, var(--k-menuHeaderPaddingXMedium, 12px));
 }
 .react-ui-MenuFooter__rootLarge {
-  font-size: var(--k-menuFooterFontSizeLarge, 16px);
-  line-height: var(--k-menuFooterLineHeightLarge, 22px);
-  padding: var(--k-menuFooterPaddingTopLarge, 8px) var(--k-menuFooterPaddingXLarge, 16px) var(--k-menuFooterPaddingBottomLarge, 18px) var(--k-menuFooterPaddingXLarge, 16px);
+  font-size: var(--k-menuFooterFontSizeLarge, var(--k-menuHeaderFontSizeLarge, 16px));
+  line-height: var(--k-menuFooterLineHeightLarge, var(--k-menuHeaderLineHeightLarge, 22px));
+  padding: var(--k-menuFooterPaddingTopLarge, var(--k-menuHeaderPaddingBottomLarge, 8px)) var(--k-menuFooterPaddingXLarge, var(--k-menuHeaderPaddingXLarge, 16px)) var(--k-menuFooterPaddingBottomLarge, var(--k-menuHeaderPaddingTopLarge, 18px)) var(--k-menuFooterPaddingXLarge, var(--k-menuHeaderPaddingXLarge, 16px));
 }
 .react-ui-MenuFooter__withLeftPaddingSmall {
   padding-left: var(--k-menuItemPaddingForIconSmall, 28px);
@@ -2824,16 +2824,16 @@ button.react-ui-MenuItem__root {
 /* components/DateInput/DateInput.css.ts */
 .react-ui-DateInput__icon {
   cursor: pointer;
-  color: var(--k-dateInputIconColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-dateInputIconColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-DateInput__iconSmall {
-  font-size: var(--k-inputFontSizeSmall, 14px);
+  font-size: var(--k-inputFontSizeSmall, var(--k-fontSizeSmall, 14px));
 }
 .react-ui-DateInput__iconMedium {
-  font-size: var(--k-inputFontSizeMedium, 16px);
+  font-size: var(--k-inputFontSizeMedium, var(--k-fontSizeMedium, 16px));
 }
 .react-ui-DateInput__iconLarge {
-  font-size: var(--k-inputFontSizeLarge, 18px);
+  font-size: var(--k-inputFontSizeLarge, var(--k-fontSizeLarge, 18px));
 }
 .react-ui-DateInput__iconDisabled {
   cursor: default;
@@ -2865,7 +2865,7 @@ button.react-ui-MenuItem__root {
   line-height: normal;
 }
 .react-ui-DatePicker__calendarWrapper {
-  background: var(--k-calendarBg, var(--k-color-surface-high, #ffffff));
+  background: var(--k-calendarBg, var(--k-bgSecondary, var(--k-bgDefault, var(--k-color-surface-high, #ffffff))));
   box-shadow: var(--k-pickerShadow, 0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12));
   display: flex;
   flex-flow: column nowrap;
@@ -2885,13 +2885,13 @@ button.react-ui-MenuItem__root {
   color: var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
 }
 .react-ui-DateRangePicker__inputWrapperWidth {
-  min-width: calc(var(--k-calendarCellWidth, 32px) * 7 + var(--k-calendarPaddingX, 18px) * 2);
+  min-width: calc(var(--k-calendarCellWidth, var(--k-calendarCellHeight, 32px)) * 7 + var(--k-calendarPaddingX, 18px) * 2);
 }
 .react-ui-DateRangePicker__inputWrapperWidthFull {
   width: 100%;
 }
 .react-ui-DateRangePicker__inputVisuallyFocus {
-  box-shadow: var(--k-inputFocusShadow, 0 0 0 calc(2px - 1px) var(--k-color-line-accent-bold, #484848));
+  box-shadow: var(--k-inputFocusShadow, 0 0 0 var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px)) var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
 }
 .react-ui-DateRangePicker__calendarWrapper {
   box-shadow: var(--k-pickerShadow, 0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12));
@@ -3020,16 +3020,16 @@ button.react-ui-MenuItem__root {
   flex-wrap: wrap;
   position: relative;
   border-radius: var(--k-fileUploaderBorderRadius, 8px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
-  color: var(--k-fileUploaderTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  color: var(--k-fileUploaderTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-FileUploader__uploadButton {
   width: 100%;
   position: relative;
   display: inline-flex;
   align-items: center;
-  border: var(--k-fileUploaderBorderWidth, 1px) var(--k-fileUploaderBorderStyle, dashed) var(--k-fileUploaderBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-fileUploaderBorderStyle, dashed) var(--k-fileUploaderBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
   box-sizing: border-box;
   border-radius: var(--k-fileUploaderBorderRadius, 8px);
   outline: none;
@@ -3038,7 +3038,7 @@ button.react-ui-MenuItem__root {
   background-color: var(--k-fileUploaderUploadButtonBg, transparent);
 }
 .react-ui-FileUploader__uploadButtonWithFile {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid transparent;
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid transparent;
   background: none;
 }
 .react-ui-FileUploader__uploadButtonIconGapSmall {
@@ -3051,7 +3051,7 @@ button.react-ui-MenuItem__root {
   margin-right: var(--k-inputIconGapLarge, 8px);
 }
 .react-ui-FileUploader__dragOver {
-  border: 1px solid var(--k-fileUploaderDragOverBorderColor, var(--k-color-line-accent-bold, #484848));
+  border: 1px solid var(--k-fileUploaderDragOverBorderColor, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   border-radius: var(--k-fileUploaderBorderRadius, 8px);
   box-shadow: var(--k-fileUploaderDragOverShadow, 0px 0px 0px 3px rgb(149, 149, 149), 0px 0px 0px 8px rgba(61, 61, 61, 0.2));
 }
@@ -3097,31 +3097,31 @@ button.react-ui-MenuItem__root {
   color: var(--k-fileUploaderIconColor, var(--k-color-text-neutral-pale, rgba(0, 0, 0, 0.4)));
 }
 .react-ui-FileUploader__iconDisabled {
-  color: var(--k-fileUploaderDisabledIconColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledIconColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-FileUploader__link {
   outline: none;
   text-decoration: none;
-  color: var(--k-fileUploaderLinkColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-fileUploaderLinkColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-FileUploader__linkDisabled {
-  color: var(--k-fileUploaderDisabledLinkColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledLinkColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-FileUploader__singleFile {
   width: 100%;
   height: inherit;
 }
 .react-ui-FileUploader__iconSmall {
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-FileUploader__iconMedium {
-  font-size: var(--k-fileUploaderFontSizeMedium, 16px);
-  line-height: var(--k-fileUploaderLineHeightMedium, 22px);
+  font-size: var(--k-fileUploaderFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-FileUploader__iconLarge {
-  font-size: var(--k-fileUploaderFontSizeLarge, 18px);
-  line-height: var(--k-fileUploaderLineHeightLarge, 24px);
+  font-size: var(--k-fileUploaderFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-FileUploader__root-2 {
   width: 100%;
@@ -3134,22 +3134,22 @@ button.react-ui-MenuItem__root {
   width: 100%;
 }
 .react-ui-FileUploader__sizeSmall {
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
   box-sizing: border-box;
-  padding: var(--k-fileUploaderPaddingYSmall, 5px) var(--k-fileUploaderPaddingXSmall, 7px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
+  padding: var(--k-fileUploaderPaddingYSmall, var(--k-controlPaddingYSmall, 5px)) var(--k-fileUploaderPaddingXSmall, 7px);
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-FileUploader__sizeMedium {
-  font-size: var(--k-fileUploaderFontSizeMedium, 16px);
+  font-size: var(--k-fileUploaderFontSizeMedium, var(--k-fontSizeMedium, 16px));
   box-sizing: border-box;
-  padding: var(--k-fileUploaderPaddingYMedium, 8px) var(--k-fileUploaderPaddingXMedium, 9px);
-  line-height: var(--k-fileUploaderLineHeightMedium, 22px);
+  padding: var(--k-fileUploaderPaddingYMedium, var(--k-controlPaddingYMedium, 8px)) var(--k-fileUploaderPaddingXMedium, 9px);
+  line-height: var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-FileUploader__sizeLarge {
-  font-size: var(--k-fileUploaderFontSizeLarge, 18px);
+  font-size: var(--k-fileUploaderFontSizeLarge, var(--k-fontSizeLarge, 18px));
   box-sizing: border-box;
-  padding: var(--k-fileUploaderPaddingYLarge, 11px) var(--k-fileUploaderPaddingXLarge, 11px);
-  line-height: var(--k-fileUploaderLineHeightLarge, 24px);
+  padding: var(--k-fileUploaderPaddingYLarge, var(--k-controlPaddingYLarge, 11px)) var(--k-fileUploaderPaddingXLarge, 11px);
+  line-height: var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-FileUploader__content {
   display: block;
@@ -3198,7 +3198,7 @@ button.react-ui-MenuItem__root {
   height: var(--k-fileUploaderTileMinHeightLarge, 184px);
 }
 .react-ui-FileUploader__uploadButtonWithFile-2 {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid transparent;
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid transparent;
   background: none;
   justify-content: start;
 }
@@ -3212,22 +3212,22 @@ button.react-ui-MenuItem__root {
   margin-bottom: var(--k-inputIconGapLarge, 8px);
 }
 .react-ui-FileUploader__sizeSmall-2 {
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
   box-sizing: border-box;
   padding: var(--k-fileUploaderTilePaddingSmall, 3px) var(--k-fileUploaderTilePaddingSmall, 3px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-FileUploader__sizeMedium-2 {
-  font-size: var(--k-fileUploaderFontSizeMedium, 16px);
+  font-size: var(--k-fileUploaderFontSizeMedium, var(--k-fontSizeMedium, 16px));
   box-sizing: border-box;
   padding: var(--k-fileUploaderTilePaddingMedium, 5px) var(--k-fileUploaderTilePaddingMedium, 5px);
-  line-height: var(--k-fileUploaderLineHeightMedium, 22px);
+  line-height: var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-FileUploader__sizeLarge-2 {
-  font-size: var(--k-fileUploaderFontSizeLarge, 18px);
+  font-size: var(--k-fileUploaderFontSizeLarge, var(--k-fontSizeLarge, 18px));
   box-sizing: border-box;
   padding: var(--k-fileUploaderTilePaddingLarge, 7px) var(--k-fileUploaderTilePaddingLarge, 7px);
-  line-height: var(--k-fileUploaderLineHeightLarge, 24px);
+  line-height: var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-FileUploader__content-2 {
   display: block;
@@ -3245,26 +3245,26 @@ button.react-ui-MenuItem__root {
   height: 100%;
 }
 .react-ui-FileUploader__uploadButtonFocus {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorFocus, var(--k-color-line-accent-bold, #484848));
-  box-shadow: 0px 0px 0px 1px var(--k-fileUploaderBorderColorFocus, var(--k-color-line-accent-bold, #484848));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
+  box-shadow: 0px 0px 0px 1px var(--k-fileUploaderBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
 }
 .react-ui-FileUploader__disabled {
   cursor: default;
-  color: var(--k-fileUploaderDisabledTextColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledTextColor, var(--k-fileUploaderDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
   box-shadow: none;
   background-clip: var(--k-fileUploaderDisabledBgClip, padding-box);
 }
 .react-ui-FileUploader__disabledBackground {
-  background: var(--k-fileUploaderDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
-  border: var(--k-fileUploaderDisabledBorder, 1px dashed var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  background: var(--k-fileUploaderDisabledBg, var(--k-btnDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))));
+  border: var(--k-fileUploaderDisabledBorder, var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-fileUploaderBorderStyle, dashed) var(--k-fileUploaderDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))));
 }
 .react-ui-FileUploader__warningButton {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
-  box-shadow: 0px 0px 0px 1px var(--k-fileUploaderBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
+  box-shadow: 0px 0px 0px 1px var(--k-fileUploaderBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 .react-ui-FileUploader__errorButton {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorError, var(--k-color-line-error-bold, #d6192a));
-  box-shadow: 0px 0px 0px 1px var(--k-fileUploaderBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
+  box-shadow: 0px 0px 0px 1px var(--k-fileUploaderBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-FileUploader__uploadButtonTileWithFileSmall {
   padding: var(--k-fileUploaderTileFilePaddingSmall, 7px);
@@ -3280,11 +3280,11 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-FileUploader__warningFile {
   background: var(--k-fileUploaderWarningBgColor, var(--k-color-shape-faint-warning, #fff1ca));
-  color: var(--k-fileUploaderValidationTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-fileUploaderValidationTextColor, var(--k-fileUploaderTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
 }
 .react-ui-FileUploader__errorFile {
   background: var(--k-fileUploaderErrorBgColor, var(--k-color-shape-faint-error, #ffedef));
-  color: var(--k-fileUploaderValidationTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-fileUploaderValidationTextColor, var(--k-fileUploaderTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
 }
 .react-ui-FileUploader__hovered {
   background: var(--k-fileUploaderHoveredBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
@@ -3296,7 +3296,7 @@ button.react-ui-MenuItem__root {
   text-decoration: none;
 }
 .react-ui-FileUploader__disabled .react-ui-file-uploader-after-link-text {
-  color: var(--k-fileUploaderDisabledTextColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledTextColor, var(--k-fileUploaderDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-FileUploader__warningFile:hover {
   background: var(--k-fileUploaderWarningBgHoverColor, var(--k-color-shape-faint-warning-hover, #f9e3ac));
@@ -3327,8 +3327,8 @@ button.react-ui-MenuItem__root {
 .react-ui-Hint__content {
   box-sizing: border-box;
   color: var(--k-hintColor, var(--k-color-text-inverted-neutral-heavy, rgba(255, 255, 255, 0.96)));
-  font-size: var(--k-hintFontSize, 14px);
-  line-height: var(--k-hintLineHeight, 20px);
+  font-size: var(--k-hintFontSize, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-hintLineHeight, var(--k-controlLineHeightSmall, 20px));
   max-width: var(--k-hintMaxWidth, 200px);
   overflow-wrap: break-word;
   padding: var(--k-hintPaddingY, 4px) var(--k-hintPaddingX, 8px);
@@ -3361,20 +3361,20 @@ button.react-ui-MenuItem__root {
 .react-ui-FileUploaderFile__sizeSmall {
   width: var(--k-fileUploaderFileSizeWidthSmall, 80px);
   margin-right: var(--k-fileUploaderFileSizeMarginSmall, 32px);
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-FileUploaderFile__sizeMedium {
   width: var(--k-fileUploaderFileSizeWidthMedium, 88px);
   margin-right: var(--k-fileUploaderFileSizeMarginMedium, 34px);
-  font-size: var(--k-fileUploaderFontSizeMedium, 16px);
-  line-height: var(--k-fileUploaderLineHeightMedium, 22px);
+  font-size: var(--k-fileUploaderFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-FileUploaderFile__sizeLarge {
   width: var(--k-fileUploaderFileSizeWidthLarge, 104px);
   margin-right: var(--k-fileUploaderFileSizeMarginLarge, 36px);
-  font-size: var(--k-fileUploaderFontSizeLarge, 18px);
-  line-height: var(--k-fileUploaderLineHeightLarge, 24px);
+  font-size: var(--k-fileUploaderFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-FileUploaderFile__icon {
   position: absolute;
@@ -3394,16 +3394,16 @@ button.react-ui-MenuItem__root {
   margin-left: 0;
 }
 .react-ui-FileUploaderFile__contentSmall {
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-FileUploaderFile__contentMedium {
-  font-size: var(--k-fileUploaderFontSizeMedium, 16px);
-  line-height: var(--k-fileUploaderLineHeightMedium, 22px);
+  font-size: var(--k-fileUploaderFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-FileUploaderFile__contentLarge {
-  font-size: var(--k-fileUploaderFontSizeLarge, 18px);
-  line-height: var(--k-fileUploaderLineHeightLarge, 24px);
+  font-size: var(--k-fileUploaderFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-FileUploaderFile__content-2 {
   flex-direction: row;
@@ -3451,7 +3451,7 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-FileUploaderFile__disabled {
   cursor: default;
-  color: var(--k-fileUploaderDisabledTextColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledTextColor, var(--k-fileUploaderDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-FileUploaderFile__content-3 {
   flex-direction: column;
@@ -3533,17 +3533,17 @@ button.react-ui-MenuItem__root {
   text-align: center;
 }
 .react-ui-FileUploaderFile__contentSmall-3 {
-  max-height: calc(var(--k-fileUploaderLineHeightSmall, 20px) * 2);
+  max-height: calc(var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px)) * 2);
 }
 .react-ui-FileUploaderFile__contentMedium-3 {
-  max-height: calc(var(--k-fileUploaderLineHeightMedium, 22px) * 2);
+  max-height: calc(var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px)) * 2);
 }
 .react-ui-FileUploaderFile__contentLarge-2 {
-  max-height: calc(var(--k-fileUploaderLineHeightLarge, 24px) * 2);
+  max-height: calc(var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px)) * 2);
 }
 .react-ui-FileUploaderFile__disabled-2 {
   cursor: default;
-  color: var(--k-fileUploaderDisabledIconColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledIconColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-FileUploaderFile__validationTextWarning {
   color: var(--k-fileUploaderWarningTextColor, var(--k-color-text-warning-heavy, #d26e00));
@@ -3553,7 +3553,7 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-FileUploaderFile__disabledFileTypeIcon {
   box-shadow: none;
-  background: var(--k-fileUploaderDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
+  background: var(--k-fileUploaderDisabledBg, var(--k-btnDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))));
 }
 .react-ui-FileUploaderFile__warningFileTypeIcon {
   background: var(--k-fileUploaderWarningBgColor, var(--k-color-shape-faint-warning, #fff1ca));
@@ -3564,7 +3564,7 @@ button.react-ui-MenuItem__root {
   border: 1px solid var(--k-fileUploaderErrorBgColor, var(--k-color-shape-faint-error, #ffedef));
 }
 .react-ui-FileUploaderFile__sizeDisabled {
-  color: var(--k-fileUploaderDisabledIconColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-fileUploaderDisabledIconColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-FileUploaderFile__icon:hover {
   background: var(--k-fileUploaderHoveredBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
@@ -3573,7 +3573,7 @@ button.react-ui-MenuItem__root {
   background: var(--k-fileUploaderActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16)));
 }
 .react-ui-FileUploaderFile__disabledFileTypeIconSvg svg {
-  fill: var(--k-fileUploaderDisabledFileTypeIcon, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))) !important;
+  fill: var(--k-fileUploaderDisabledFileTypeIcon, var(--k-fileUploaderDisabledIconColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))))) !important;
 }
 .react-ui-FileUploaderFile__iconColor:hover {
   color: var(--k-fileUploaderIconHoverColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
@@ -3599,13 +3599,13 @@ button.react-ui-MenuItem__root {
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--k-fileUploaderBorderRadius, 8px);
-  border: var(--k-fileUploaderBorderWidth, 1px) solid transparent;
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid transparent;
   box-shadow: 0 0 0 1px transparent;
   cursor: pointer;
 }
 .react-ui-FileUploaderFileList__fileWrapperFocus {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorFocus, var(--k-color-line-accent-bold, #484848));
-  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorFocus, var(--k-color-line-accent-bold, #484848));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
+  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
 }
 .react-ui-FileUploaderFileList__fileWrapperHover {
   background: var(--k-fileUploaderHoveredBg, var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06)));
@@ -3613,11 +3613,11 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-FileUploaderFileList__warningFile {
   background: var(--k-fileUploaderWarningBgColor, var(--k-color-shape-faint-warning, #fff1ca));
-  color: var(--k-fileUploaderValidationTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-fileUploaderValidationTextColor, var(--k-fileUploaderTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
 }
 .react-ui-FileUploaderFileList__errorFile {
   background: var(--k-fileUploaderErrorBgColor, var(--k-color-shape-faint-error, #ffedef));
-  color: var(--k-fileUploaderValidationTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-fileUploaderValidationTextColor, var(--k-fileUploaderTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
 }
 .react-ui-FileUploaderFileList__removeBorderTopRadius {
   border-top-right-radius: 0;
@@ -3643,19 +3643,19 @@ button.react-ui-MenuItem__root {
   color: var(--k-fileUploaderWarningTextColor, var(--k-color-text-warning-heavy, #d26e00));
 }
 .react-ui-FileUploaderFileList__summarySmall {
-  font-size: var(--k-fileUploaderFontSizeSmall, 14px);
-  line-height: var(--k-fileUploaderLineHeightSmall, 20px);
-  padding: var(--k-fileUploaderPaddingYSmall, 5px) var(--k-fileUploaderPaddingXSmall, 7px);
+  font-size: var(--k-fileUploaderFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-fileUploaderLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  padding: var(--k-fileUploaderPaddingYSmall, var(--k-controlPaddingYSmall, 5px)) var(--k-fileUploaderPaddingXSmall, 7px);
 }
 .react-ui-FileUploaderFileList__summaryMedium {
-  font-size: var(--k-fileUploaderFontSizeMedium, 16px);
-  line-height: var(--k-fileUploaderLineHeightMedium, 22px);
-  padding: var(--k-fileUploaderPaddingYMedium, 8px) var(--k-fileUploaderPaddingXMedium, 9px);
+  font-size: var(--k-fileUploaderFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-fileUploaderLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
+  padding: var(--k-fileUploaderPaddingYMedium, var(--k-controlPaddingYMedium, 8px)) var(--k-fileUploaderPaddingXMedium, 9px);
 }
 .react-ui-FileUploaderFileList__summaryLarge {
-  font-size: var(--k-fileUploaderFontSizeLarge, 18px);
-  line-height: var(--k-fileUploaderLineHeightLarge, 24px);
-  padding: var(--k-fileUploaderPaddingYLarge, 11px) var(--k-fileUploaderPaddingXLarge, 11px);
+  font-size: var(--k-fileUploaderFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-fileUploaderLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
+  padding: var(--k-fileUploaderPaddingYLarge, var(--k-controlPaddingYLarge, 11px)) var(--k-fileUploaderPaddingXLarge, 11px);
 }
 .react-ui-FileUploaderFileList__file {
   width: 100%;
@@ -3666,25 +3666,25 @@ button.react-ui-MenuItem__root {
   margin-top: var(--k-fileUploaderListGap, 8px);
 }
 .react-ui-FileUploaderFileList__fileWrapperSmall {
-  padding: var(--k-fileUploaderPaddingYSmall, 5px) var(--k-fileUploaderPaddingXSmall, 7px);
+  padding: var(--k-fileUploaderPaddingYSmall, var(--k-controlPaddingYSmall, 5px)) var(--k-fileUploaderPaddingXSmall, 7px);
 }
 .react-ui-FileUploaderFileList__fileWrapperMedium {
-  padding: var(--k-fileUploaderPaddingYMedium, 8px) var(--k-fileUploaderPaddingXMedium, 9px);
+  padding: var(--k-fileUploaderPaddingYMedium, var(--k-controlPaddingYMedium, 8px)) var(--k-fileUploaderPaddingXMedium, 9px);
 }
 .react-ui-FileUploaderFileList__fileWrapperLarge {
-  padding: var(--k-fileUploaderPaddingYLarge, 11px) var(--k-fileUploaderPaddingXLarge, 11px);
+  padding: var(--k-fileUploaderPaddingYLarge, var(--k-controlPaddingYLarge, 11px)) var(--k-fileUploaderPaddingXLarge, 11px);
 }
 .react-ui-FileUploaderFileList__errorFileFocus {
   background: var(--k-fileUploaderErrorBgHoverColor, var(--k-color-shape-faint-error-hover, #ffdadd));
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
   border-radius: var(--k-fileUploaderBorderRadius, 8px) !important;
-  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-FileUploaderFileList__warningFileFocus {
   background: var(--k-fileUploaderWarningBgHoverColor, var(--k-color-shape-faint-warning-hover, #f9e3ac));
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
   border-radius: var(--k-fileUploaderBorderRadius, 8px) !important;
-  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 .react-ui-FileUploaderFileList__file-2 {
   width: 100%;
@@ -3708,14 +3708,14 @@ button.react-ui-MenuItem__root {
   height: var(--k-fileUploaderTileHeightLarge, 248px);
 }
 .react-ui-FileUploaderFileList__errorFileFocus-2 {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
   border-radius: var(--k-fileUploaderBorderRadius, 8px) !important;
-  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-FileUploaderFileList__warningFileFocus-2 {
-  border: var(--k-fileUploaderBorderWidth, 1px) solid var(--k-fileUploaderBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-fileUploaderBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
   border-radius: var(--k-fileUploaderBorderRadius, 8px) !important;
-  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  box-shadow: 0 0 0 1px var(--k-fileUploaderBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 .react-ui-FileUploaderFileList__fileWrapper::before {
   content: ' ';
@@ -3723,7 +3723,7 @@ button.react-ui-MenuItem__root {
   width: 100%;
   height: 100%;
   border-radius: var(--k-fileUploaderBorderRadius, 8px);
-  border: var(--k-fileUploaderBorderWidth, 1px) solid transparent;
+  border: var(--k-fileUploaderBorderWidth, var(--k-controlBorderWidth, 1px)) solid transparent;
   box-shadow: 0 0 0 1px transparent;
   top: -1px;
   left: -1px;
@@ -4089,8 +4089,8 @@ button.react-ui-MenuItem__root {
   margin-left: calc(-1 * var(--k-modalCloseButtonClickAreaLeft, 24px));
 }
 .react-ui-Modal__closeMobile {
-  right: var(--k-mobileModalCloseButtonRightPadding, 22px);
-  top: var(--k-mobileModalCloseButtonTopPadding, 22px);
+  right: var(--k-mobileModalCloseButtonRightPadding, var(--k-mobileModalCloseButtonClickArea, 22px));
+  top: var(--k-mobileModalCloseButtonTopPadding, var(--k-mobileModalCloseButtonClickArea, 22px));
   padding: var(--k-mobileModalCloseButtonClickArea, 22px);
   margin: calc(-1 * var(--k-mobileModalCloseButtonClickArea, 22px));
 }
@@ -4133,7 +4133,7 @@ button.react-ui-MenuItem__root {
   padding: var(--k-modalHeaderPaddingTop, 24px) var(--k-modalPaddingRight, 32px) var(--k-modalHeaderPaddingBottom, 16px) var(--k-modalPaddingLeft, 32px);
   overflow-wrap: break-word;
   word-wrap: break-word;
-  color: var(--k-modalHeaderTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-modalHeaderTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   font-weight: var(--k-modalHeaderFontWeight, 700);
   border-radius: var(--k-modalBorderRadius, 16px) var(--k-modalBorderRadius, 16px) 0 0;
 }
@@ -4182,12 +4182,12 @@ button.react-ui-MenuItem__root {
   margin: var(--k-modalSeparatorFixedMargin, 0 16px);
 }
 .react-ui-Modal__headerAddPadding {
-  padding-bottom: var(--k-modalHeaderAdditionalPaddingBottom, 16px);
+  padding-bottom: var(--k-modalHeaderAdditionalPaddingBottom, var(--k-modalHeaderPaddingBottom, 16px));
 }
 .react-ui-Modal__fixedHeader {
   margin-bottom: var(--k-modalFixedHeaderMarginBottom, 0px);
-  padding-bottom: var(--k-modalFixedHeaderPaddingBottom, 16px);
-  background: var(--k-modalFixedHeaderBg, var(--k-color-surface-base, #ffffff));
+  padding-bottom: var(--k-modalFixedHeaderPaddingBottom, var(--k-modalHeaderPaddingBottom, 16px));
+  background: var(--k-modalFixedHeaderBg, var(--k-modalBg, var(--k-color-surface-base, #ffffff)));
   border-bottom: var(--k-modalFixedHeaderBorder, none);
   border-radius: 0;
 }
@@ -4204,19 +4204,19 @@ button.react-ui-MenuItem__root {
   padding-right: calc(2 * var(--k-modalCloseButtonPadding, 32px) + var(--k-modalCloseIconSize, 20px));
 }
 .react-ui-Modal__mobileHeaderWithClose {
-  padding-right: calc(2 * var(--k-mobileModalCloseButtonRightPadding, 22px) + var(--k-mobileModalCloseIconSize, 20px));
+  padding-right: calc(2 * var(--k-mobileModalCloseButtonRightPadding, var(--k-mobileModalCloseButtonClickArea, 22px)) + var(--k-mobileModalCloseIconSize, 20px));
 }
 .react-ui-Modal__fixedFooter {
-  padding-top: var(--k-modalFixedFooterPaddingTop, 20px);
+  padding-top: var(--k-modalFixedFooterPaddingTop, var(--k-modalFooterPanelPaddingTop, 20px));
   margin-top: var(--k-modalFixedFooterMarginTop, 0px);
-  background: var(--k-modalFixedHeaderBg, var(--k-color-surface-base, #ffffff));
+  background: var(--k-modalFixedHeaderBg, var(--k-modalBg, var(--k-color-surface-base, #ffffff)));
   border-top: var(--k-modalFixedFooterBorder, none);
   border-radius: 0;
 }
 .react-ui-Modal__panel {
   padding-top: var(--k-modalFooterPanelPaddingTop, 20px);
-  padding-bottom: var(--k-modalFooterPanelPaddingBottom, 20px);
-  background: var(--k-modalFooterBg, var(--k-color-surface-base, #ffffff));
+  padding-bottom: var(--k-modalFooterPanelPaddingBottom, var(--k-modalFooterPaddingBottom, 20px));
+  background: var(--k-modalFooterBg, var(--k-modalBg, var(--k-color-surface-base, #ffffff)));
 }
 .react-ui-Modal__mobileFooter {
   padding: var(--k-mobileModalFooterPadding, 16px);
@@ -4279,7 +4279,7 @@ button.react-ui-MenuItem__root {
   width: 100%;
   left: 0;
   z-index: -1;
-  box-shadow: var(--k-modalFixedHeaderShadow, none);
+  box-shadow: var(--k-modalFixedHeaderShadow, var(--k-fixedPanelShadow, none));
 }
 .react-ui-Modal__fixedFooter:before {
   content: '';
@@ -4289,7 +4289,7 @@ button.react-ui-MenuItem__root {
   width: 100%;
   left: 0;
   z-index: -1;
-  box-shadow: var(--k-modalFixedFooterShadow, none);
+  box-shadow: var(--k-modalFixedFooterShadow, var(--k-fixedPanelShadow, none));
 }
 .react-ui-Modal__fixedPanel:before {
   box-shadow: var(--k-modalFixedPanelShadow, none);
@@ -4364,16 +4364,16 @@ button.react-ui-MenuItem__root {
   text-wrap-mode: nowrap;
 }
 .react-ui-Paging__pagingSmall {
-  font-size: var(--k-pagingFontSizeSmall, 14px);
-  line-height: var(--k-pagingLineHeightSmall, 20px);
+  font-size: var(--k-pagingFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-pagingLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-Paging__pagingMedium {
-  font-size: var(--k-pagingFontSizeMedium, 16px);
-  line-height: var(--k-pagingLineHeightMedium, 22px);
+  font-size: var(--k-pagingFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-pagingLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-Paging__pagingLarge {
-  font-size: var(--k-pagingFontSizeLarge, 18px);
-  line-height: var(--k-pagingLineHeightLarge, 24px);
+  font-size: var(--k-pagingFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-pagingLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-Paging__pagingDisabled {
   pointer-events: none;
@@ -4395,7 +4395,7 @@ button.react-ui-MenuItem__root {
   padding: var(--k-pagingDotsPaddingLarge, 19px 16px 13px 16px);
 }
 .react-ui-Paging__dotsDisabled {
-  color: var(--k-pagingDotsDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-pagingDotsDisabledColor, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-Paging__pageLinkWrapper {
   display: inline-flex;
@@ -4407,7 +4407,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Paging__pageLink {
   box-sizing: var(--k-pagingPageLinkBoxSizing, border-box);
   border-radius: var(--k-pagingPageLinkBorderRadius, 9999px);
-  color: var(--k-pagingPageLinkColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-pagingPageLinkColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   cursor: pointer;
   display: block;
   outline: none;
@@ -4429,7 +4429,7 @@ button.react-ui-MenuItem__root {
 .react-ui-Paging__pageLinkCurrent {
   cursor: default;
   background-color: var(--k-pagingPageLinkActiveBg, var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))) !important;
-  color: var(--k-pagingPageLinkActiveColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-pagingPageLinkActiveColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-Paging__pageLinkCurrentDisabled {
   background-color: var(--k-pagingPageLinkDisabledActiveBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))) !important;
@@ -4450,7 +4450,7 @@ button.react-ui-MenuItem__root {
   color: var(--k-pagingPageLinkHintColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
 }
 .react-ui-Paging__forwardLink {
-  color: var(--k-pagingForwardLinkColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-pagingForwardLinkColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   cursor: pointer;
   display: inline-block;
   outline: none;
@@ -4469,15 +4469,15 @@ button.react-ui-MenuItem__root {
   padding: var(--k-pagingForwardLinkPaddingLarge, 12px 16px 12px 20px);
 }
 .react-ui-Paging__forwardLinkMediumMobile {
-  line-height: var(--k-pagingFontSizeMedium, 16px);
+  line-height: var(--k-pagingFontSizeMedium, var(--k-fontSizeMedium, 16px));
   padding: var(--k-pagingForwardLinkPaddingMediumMobile, 10px);
 }
 .react-ui-Paging__forwardLinkLargeMobile {
-  line-height: var(--k-pagingFontSizeLarge, 18px);
+  line-height: var(--k-pagingFontSizeLarge, var(--k-fontSizeLarge, 18px));
   padding: var(--k-pagingForwardLinkPaddingLargeMobile, 12px);
 }
 .react-ui-Paging__forwardLinkDisabled {
-  color: var(--k-pagingForwardLinkDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-pagingForwardLinkDisabledColor, var(--k-linkDisabledColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
   pointer-events: none;
 }
 .react-ui-Paging__pageLink:hover {
@@ -4554,24 +4554,24 @@ button.react-ui-MenuItem__root {
   align-items: baseline;
 }
 .react-ui-Radio__rootSmall {
-  font-size: var(--k-radioFontSizeSmall, 14px);
-  line-height: var(--k-radioLineHeightSmall, 20px);
+  font-size: var(--k-radioFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-radioLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
   padding: var(--k-radioPaddingYSmall, 6px) 0;
 }
 .react-ui-Radio__rootMedium {
-  font-size: var(--k-radioFontSizeMedium, 16px);
-  line-height: var(--k-radioLineHeightMedium, 22px);
+  font-size: var(--k-radioFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-radioLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
   padding: var(--k-radioPaddingYMedium, 9px) 0;
 }
 .react-ui-Radio__rootLarge {
-  font-size: var(--k-radioFontSizeLarge, 18px);
-  line-height: var(--k-radioLineHeightLarge, 24px);
+  font-size: var(--k-radioFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-radioLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
   padding: var(--k-radioPaddingYLarge, 12px) 0;
 }
 .react-ui-Radio__circle {
   background-image: var(--k-radioBgImage, none);
   border-radius: 50%;
-  border: var(--k-radioBorder, 1px solid var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  border: var(--k-radioBorder, var(--k-radioBorderWidth, var(--k-controlBorderWidth, 1px)) solid var(--k-radioBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
   box-shadow: var(--k-radioBoxShadow, none);
   box-sizing: border-box;
   display: inline-block;
@@ -4595,7 +4595,7 @@ button.react-ui-MenuItem__root {
   margin: calc(var(--k-radioCircleOffsetY, 1px) + var(--k-radioBorderWidthCompensation, 0px) + calc(var(--k-baseline-18, 0) * var(--k-labGrotesqueBaselineCompensation, 1) * 1px)) var(--k-radioBorderWidthCompensation, 0px) 0;
 }
 .react-ui-Radio__checked {
-  background-color: var(--k-radioCheckedBgColor, var(--k-color-shape-bold-accent, #3d3d3d));
+  background-color: var(--k-radioCheckedBgColor, var(--k-checkboxCheckedBg, var(--k-color-shape-bold-accent, #3d3d3d)));
   border-color: var(--k-radioCheckedBorderColor, transparent);
 }
 .react-ui-Radio__input {
@@ -4607,14 +4607,14 @@ button.react-ui-MenuItem__root {
   z-index: -1;
 }
 .react-ui-Radio__disabled {
-  background: var(--k-radioDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))) !important;
+  background: var(--k-radioDisabledBg, var(--k-checkboxBgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)))) !important;
   border-color: var(--k-radioDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08))) !important;
   box-shadow: var(--k-radioDisabledShadow, none) !important;
 }
 .react-ui-Radio__caption {
   display: var(--k-radioCaptionDisplay, inline-flex);
   white-space: normal;
-  color: var(--k-radioTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-radioTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
 }
 .react-ui-Radio__placeholder {
   display: inline-block;
@@ -4625,19 +4625,19 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-Radio__subcaption {
   margin-top: 2px;
-  color: var(--k-radioCommentTextColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
+  color: var(--k-radioCommentTextColor, var(--k-commentTextColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56))));
 }
 .react-ui-Radio__subcaptionSmall {
-  font-size: var(--k-radioCommentFontSizeSmall, 12px);
-  line-height: var(--k-radioCommentLineHeightSmall, 16px);
+  font-size: var(--k-radioCommentFontSizeSmall, var(--k-commentFontSizeSmall, 12px));
+  line-height: var(--k-radioCommentLineHeightSmall, var(--k-commentLineHeightSmall, 16px));
 }
 .react-ui-Radio__subcaptionMedium {
-  font-size: var(--k-radioCommentFontSizeMedium, 14px);
-  line-height: var(--k-radioCommentLineHeightMedium, 20px);
+  font-size: var(--k-radioCommentFontSizeMedium, var(--k-commentFontSizeMedium, 14px));
+  line-height: var(--k-radioCommentLineHeightMedium, var(--k-commentLineHeightMedium, 20px));
 }
 .react-ui-Radio__subcaptionLarge {
-  font-size: var(--k-radioCommentFontSizeLarge, 16px);
-  line-height: var(--k-radioCommentLineHeightLarge, 22px);
+  font-size: var(--k-radioCommentFontSizeLarge, var(--k-commentFontSizeLarge, 16px));
+  line-height: var(--k-radioCommentLineHeightLarge, var(--k-commentLineHeightLarge, 22px));
 }
 .react-ui-Radio__captionDisabled {
   color: var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
@@ -4646,11 +4646,11 @@ button.react-ui-MenuItem__root {
   transition: background var(--k-transitionDuration, 100ms) var(--k-transitionTimingFunction, cubic-bezier(0.5, 1, 0.89, 1));
 }
 .react-ui-Radio__root:hover .react-ui-radio-circle {
-  background: var(--k-radioHoverBg, var(--k-color-shape-other-field-hover, #f2f2f2));
+  background: var(--k-radioHoverBg, var(--k-checkboxHoverBg, var(--k-color-shape-other-field-hover, #f2f2f2)));
   box-shadow: var(--k-radioHoverShadow, none);
 }
 .react-ui-Radio__root:active .react-ui-radio-circle {
-  background: var(--k-radioActiveBg, var(--k-color-shape-other-field-pressed, #e4e4e4));
+  background: var(--k-radioActiveBg, var(--k-checkboxActiveBg, var(--k-color-shape-other-field-pressed, #e4e4e4)));
   box-shadow: var(--k-radioActiveShadow, none);
 }
 .react-ui-Radio__root::before {
@@ -4668,49 +4668,49 @@ button.react-ui-MenuItem__root {
   width: var(--k-radioSizeLarge, 24px);
 }
 .react-ui-Radio__rootChecked:hover .react-ui-radio-circle {
-  background: var(--k-radioCheckedHoverBgColor, var(--k-color-shape-bold-accent-hover, #292929));
+  background: var(--k-radioCheckedHoverBgColor, var(--k-checkboxCheckedHoverBg, var(--k-color-shape-bold-accent-hover, #292929)));
 }
 .react-ui-Radio__focus::after {
   content: ' ';
   position: absolute;
-  top: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  bottom: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  left: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  right: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  border-width: var(--k-radioOutlineWidth, 2px);
+  top: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  bottom: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  left: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  right: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  border-width: var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px));
   border-style: solid;
   border-radius: 50%;
   box-sizing: border-box;
-  box-shadow: var(--k-radioFocusShadow, inset 0 0 0 1px var(--k-color-surface-base, #ffffff));
-  border-color: var(--k-radioBorderColorFocus, var(--k-color-line-accent-bold, #484848));
+  box-shadow: var(--k-radioFocusShadow, inset 0 0 0 1px var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff)));
+  border-color: var(--k-radioBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
 }
 .react-ui-Radio__warning::after {
   content: ' ';
   position: absolute;
-  top: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  bottom: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  left: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  right: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  border-width: var(--k-radioOutlineWidth, 2px);
+  top: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  bottom: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  left: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  right: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  border-width: var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px));
   border-style: solid;
   border-radius: 50%;
   box-sizing: border-box;
-  box-shadow: var(--k-radioFocusShadow, inset 0 0 0 1px var(--k-color-surface-base, #ffffff));
-  border-color: var(--k-radioBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  box-shadow: var(--k-radioFocusShadow, inset 0 0 0 1px var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff)));
+  border-color: var(--k-radioBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 .react-ui-Radio__error::after {
   content: ' ';
   position: absolute;
-  top: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  bottom: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  left: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  right: calc(-1 * var(--k-radioOutlineWidth, 2px));
-  border-width: var(--k-radioOutlineWidth, 2px);
+  top: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  bottom: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  left: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  right: calc(-1 * var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px)));
+  border-width: var(--k-radioOutlineWidth, var(--k-controlOutlineWidth, 2px));
   border-style: solid;
   border-radius: 50%;
   box-sizing: border-box;
-  box-shadow: var(--k-radioFocusShadow, inset 0 0 0 1px var(--k-color-surface-base, #ffffff));
-  border-color: var(--k-radioBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  box-shadow: var(--k-radioFocusShadow, inset 0 0 0 1px var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff)));
+  border-color: var(--k-radioBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-Radio__checked::before {
   content: ' ';
@@ -4721,7 +4721,7 @@ button.react-ui-MenuItem__root {
   left: 0;
   margin: auto;
   border-radius: 50%;
-  background: var(--k-radioCheckedBulletColor, var(--k-color-shape-inverted-neutral-heavy, #ffffff));
+  background: var(--k-radioCheckedBulletColor, var(--k-checkboxCheckedColor, var(--k-color-shape-inverted-neutral-heavy, #ffffff)));
 }
 .react-ui-Radio__checkedSmall::before {
   height: var(--k-radioBulletSizeSmall, 6px);
@@ -4822,7 +4822,7 @@ button.react-ui-MenuItem__root {
   padding: var(--k-sidePageHeaderPaddingTop, 24px) 0 var(--k-sidePageHeaderPaddingBottom, 16px);
   width: 100%;
   position: relative;
-  color: var(--k-sidePageHeaderTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-sidePageHeaderTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   font-weight: var(--k-sidePageHeaderFontWeight, bold);
 }
 .react-ui-SidePage__mobileHeader {
@@ -4841,11 +4841,11 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-SidePage__title {
   padding-left: var(--k-sidePagePaddingLeft, 32px);
-  padding-right: calc(var(--k-sidePageCloseButtonClickAreaLeft, 24px) + var(--k-sidePageCloseIconSize, 20px) + var(--k-sidePageCloseButtonClickAreaRight, 28px));
+  padding-right: calc(var(--k-sidePageCloseButtonClickAreaLeft, var(--k-modalCloseButtonClickAreaLeft, 24px)) + var(--k-sidePageCloseIconSize, 20px) + var(--k-sidePageCloseButtonClickAreaRight, var(--k-modalCloseButtonClickAreaRight, 28px)));
 }
 .react-ui-SidePage__mobileTitle {
   padding-left: var(--k-mobileSidePagePaddingLeft, 16px);
-  padding-right: calc(var(--k-mobileSidePageCloseButtonPadding, 22px) * 2 + var(--k-sidePageCloseIconSize, 20px));
+  padding-right: calc(var(--k-mobileSidePageCloseButtonPadding, var(--k-mobileSidePageCloseButtonClickArea, 22px)) * 2 + var(--k-sidePageCloseIconSize, 20px));
 }
 .react-ui-SidePage__titleCut {
   overflow: hidden;
@@ -4881,19 +4881,19 @@ button.react-ui-MenuItem__root {
   cursor: pointer;
   color: inherit;
   color: var(--k-sidePageCloseButtonColor, var(--k-color-text-neutral-pale, rgba(0, 0, 0, 0.4)));
-  padding-top: var(--k-sidePageCloseButtonClickAreaTop, 30px);
-  margin-top: calc(-1 * var(--k-sidePageCloseButtonClickAreaTop, 30px));
-  padding-right: var(--k-sidePageCloseButtonClickAreaRight, 28px);
-  margin-right: calc(-1 * var(--k-sidePageCloseButtonClickAreaRight, 28px));
-  padding-bottom: var(--k-sidePageCloseButtonClickAreaBottom, 22px);
-  margin-bottom: calc(-1 * var(--k-sidePageCloseButtonClickAreaBottom, 22px));
-  padding-left: var(--k-sidePageCloseButtonClickAreaLeft, 24px);
-  margin-left: calc(-1 * var(--k-sidePageCloseButtonClickAreaLeft, 24px));
+  padding-top: var(--k-sidePageCloseButtonClickAreaTop, var(--k-modalCloseButtonClickAreaTop, 30px));
+  margin-top: calc(-1 * var(--k-sidePageCloseButtonClickAreaTop, var(--k-modalCloseButtonClickAreaTop, 30px)));
+  padding-right: var(--k-sidePageCloseButtonClickAreaRight, var(--k-modalCloseButtonClickAreaRight, 28px));
+  margin-right: calc(-1 * var(--k-sidePageCloseButtonClickAreaRight, var(--k-modalCloseButtonClickAreaRight, 28px)));
+  padding-bottom: var(--k-sidePageCloseButtonClickAreaBottom, var(--k-modalCloseButtonClickAreaBottom, 22px));
+  margin-bottom: calc(-1 * var(--k-sidePageCloseButtonClickAreaBottom, var(--k-modalCloseButtonClickAreaBottom, 22px)));
+  padding-left: var(--k-sidePageCloseButtonClickAreaLeft, var(--k-modalCloseButtonClickAreaLeft, 24px));
+  margin-left: calc(-1 * var(--k-sidePageCloseButtonClickAreaLeft, var(--k-modalCloseButtonClickAreaLeft, 24px)));
   font-size: 0;
 }
 .react-ui-SidePage__closeSticky {
-  padding-top: var(--k-sidePageCloseButtonFixedClickAreaTop, 14px);
-  margin-top: calc(-1 * var(--k-sidePageCloseButtonFixedClickAreaTop, 14px));
+  padding-top: var(--k-sidePageCloseButtonFixedClickAreaTop, var(--k-sidePageCloseButtonFixedClickAreaBottom, 14px));
+  margin-top: calc(-1 * var(--k-sidePageCloseButtonFixedClickAreaTop, var(--k-sidePageCloseButtonFixedClickAreaBottom, 14px)));
   padding-bottom: var(--k-sidePageCloseButtonFixedClickAreaBottom, 14px);
   margin-bottom: calc(-1 * var(--k-sidePageCloseButtonFixedClickAreaBottom, 14px));
 }
@@ -4912,7 +4912,7 @@ button.react-ui-MenuItem__root {
   line-height: var(--k-sidePageHeaderLineHeight, 32px);
   padding: var(--k-sidePageHeaderPaddingTop, 24px) 0 var(--k-sidePageHeaderPaddingBottom, 16px);
   position: absolute;
-  right: var(--k-sidePageCloseButtonClickAreaRight, 28px);
+  right: var(--k-sidePageCloseButtonClickAreaRight, var(--k-modalCloseButtonClickAreaRight, 28px));
   top: var(--k-sidePageCloseButtonWrapperOffsetTop, 2px);
 }
 .react-ui-SidePage__wrapperClose6_4 {
@@ -4922,11 +4922,11 @@ button.react-ui-MenuItem__root {
 .react-ui-SidePage__mobileWrapperClose {
   line-height: var(--k-mobileSidePageHeaderLineHeight, 32px);
   padding: var(--k-mobileSidePageHeaderPaddingTop, 16px) 0 var(--k-mobileSidePageHeaderPaddingBottom, 16px);
-  right: var(--k-mobileSidePageCloseButtonPadding, 22px);
+  right: var(--k-mobileSidePageCloseButtonPadding, var(--k-mobileSidePageCloseButtonClickArea, 22px));
 }
 .react-ui-SidePage__panel {
-  background: var(--k-sidePageFooterPanelBg, var(--k-color-surface-base, #ffffff));
-  padding: var(--k-sidePageFooterPanelPaddingTop, 20px) var(--k-sidePagePaddingRight, 36px) var(--k-sidePageFooterPanelPaddingBottom, 20px) var(--k-sidePagePaddingLeft, 32px);
+  background: var(--k-sidePageFooterPanelBg, var(--k-sidePageBgDefault, var(--k-color-surface-base, #ffffff)));
+  padding: var(--k-sidePageFooterPanelPaddingTop, var(--k-sidePageFooterPaddingTop, 20px)) var(--k-sidePagePaddingRight, 36px) var(--k-sidePageFooterPanelPaddingBottom, var(--k-sidePageFooterPanelPaddingTop, var(--k-sidePageFooterPaddingTop, 20px))) var(--k-sidePagePaddingLeft, 32px);
 }
 .react-ui-SidePage__wrapperCloseFixed {
   top: var(--k-sidePageCloseButtonWrapperFixedOffsetTop, 4px);
@@ -4988,7 +4988,7 @@ button.react-ui-MenuItem__root {
   width: 100%;
   left: 0;
   z-index: -1;
-  box-shadow: var(--k-sidePageFixedHeaderShadow, none);
+  box-shadow: var(--k-sidePageFixedHeaderShadow, var(--k-fixedPanelShadow, none));
 }
 .react-ui-SidePage__close::-moz-focus-inner {
   border: 0;
@@ -5010,7 +5010,7 @@ button.react-ui-MenuItem__root {
   width: 100%;
   left: 0;
   z-index: -1;
-  box-shadow: var(--k-sidePageFixedFooterShadow, none);
+  box-shadow: var(--k-sidePageFixedFooterShadow, var(--k-fixedPanelShadow, none));
 }
 .react-ui-SidePage__panelFixed:before {
   box-shadow: var(--k-sidePageFixedPanelShadow, none);
@@ -5035,24 +5035,24 @@ button.react-ui-MenuItem__root {
   width: 0;
 }
 .react-ui-Switcher__caption {
-  color: var(--k-switcherTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-switcherTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   vertical-align: middle;
   display: inline-block;
 }
 .react-ui-Switcher__captionSmall {
-  margin-right: var(--k-switcherCaptionGapSmall, 12px);
-  font-size: var(--k-switcherCaptionFontSizeSmall, 14px);
-  line-height: var(--k-switcherCaptionLineHeightSmall, 20px);
+  margin-right: var(--k-switcherCaptionGapSmall, var(--k-btnPaddingXSmall, 12px));
+  font-size: var(--k-switcherCaptionFontSizeSmall, var(--k-btnFontSizeSmall, var(--k-fontSizeSmall, 14px)));
+  line-height: var(--k-switcherCaptionLineHeightSmall, var(--k-btnLineHeightSmall, var(--k-controlLineHeightSmall, 20px)));
 }
 .react-ui-Switcher__captionMedium {
-  margin-right: var(--k-switcherCaptionGapMedium, 16px);
-  font-size: var(--k-switcherCaptionFontSizeMedium, 16px);
-  line-height: var(--k-switcherCaptionLineHeightMedium, 22px);
+  margin-right: var(--k-switcherCaptionGapMedium, var(--k-btnPaddingXMedium, 16px));
+  font-size: var(--k-switcherCaptionFontSizeMedium, var(--k-btnFontSizeMedium, var(--k-fontSizeMedium, 16px)));
+  line-height: var(--k-switcherCaptionLineHeightMedium, var(--k-btnLineHeightMedium, var(--k-controlLineHeightMedium, 22px)));
 }
 .react-ui-Switcher__captionLarge {
-  margin-right: var(--k-switcherCaptionGapLarge, 20px);
-  font-size: var(--k-switcherCaptionFontSizeLarge, 18px);
-  line-height: var(--k-switcherCaptionLineHeightLarge, 24px);
+  margin-right: var(--k-switcherCaptionGapLarge, var(--k-btnPaddingXLarge, 20px));
+  font-size: var(--k-switcherCaptionFontSizeLarge, var(--k-btnFontSizeLarge, var(--k-fontSizeLarge, 18px)));
+  line-height: var(--k-switcherCaptionLineHeightLarge, var(--k-btnLineHeightLarge, var(--k-controlLineHeightLarge, 24px)));
 }
 .react-ui-Switcher__error {
   position: relative;
@@ -5067,37 +5067,37 @@ button.react-ui-MenuItem__root {
   left: 1px;
   z-index: 1;
   border-radius: var(--k-switcherBorderRadius, 8px);
-  box-shadow: 0 0 0 var(--k-switcherOutlineWidth, 2px) var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a));
+  box-shadow: 0 0 0 var(--k-switcherOutlineWidth, var(--k-btnOutlineWidth, var(--k-controlOutlineWidth, 2px))) var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a));
 }
 /* components/Tabs/Indicator.css.ts */
 .react-ui-Indicator__root {
-  background: var(--k-tabColorFocus, var(--k-color-line-accent-bold, #484848));
+  background: var(--k-tabColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   height: var(--k-tabBorderWidth, 2px);
   position: absolute;
   transition: all 0.2s ease-out;
   border-radius: var(--k-tabIndicatorBorderRadius, 2px);
 }
 .react-ui-Indicator__primary {
-  background: var(--k-tabColorPrimary, var(--k-color-shape-bold-accent, #3d3d3d));
+  background: var(--k-tabColorPrimary, var(--k-btnPrimaryBg, var(--k-color-shape-bold-accent, #3d3d3d)));
 }
 .react-ui-Indicator__success {
-  background: var(--k-tabColorSuccess, var(--k-color-shape-bold-success, #00a948));
+  background: var(--k-tabColorSuccess, var(--k-btnSuccessBg, var(--k-color-shape-bold-success, #00a948)));
 }
 .react-ui-Indicator__warning {
-  background: var(--k-tabColorWarning, var(--k-color-shape-bold-warning, #ffbe3d));
+  background: var(--k-tabColorWarning, var(--k-btnPayBg, var(--k-color-shape-bold-warning, #ffbe3d)));
 }
 .react-ui-Indicator__error {
-  background: var(--k-tabColorError, var(--k-color-shape-bold-error, #f63b40));
+  background: var(--k-tabColorError, var(--k-btnDangerBg, var(--k-color-shape-bold-error, #f63b40)));
 }
 /* components/Tabs/Tab.css.ts */
 .react-ui-Tab__rootSmall {
   border-bottom: var(--k-tabBorderWidth, 2px) solid transparent;
   box-sizing: border-box;
-  color: var(--k-tabTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-tabTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   cursor: pointer;
   display: inline-block;
-  font-size: var(--k-tabFontSizeSmall, 14px);
-  line-height: var(--k-tabLineHeightSmall, 20px);
+  font-size: var(--k-tabFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-tabLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
   margin-left: var(--k-tabPaddingXSmall, 8px);
   margin-right: var(--k-tabPaddingXSmall, 8px);
   padding-bottom: calc(var(--k-tabPaddingYSmall, 6px) - var(--k-tabBorderWidth, 2px));
@@ -5109,11 +5109,11 @@ button.react-ui-MenuItem__root {
 .react-ui-Tab__rootMedium {
   border-bottom: var(--k-tabBorderWidth, 2px) solid transparent;
   box-sizing: border-box;
-  color: var(--k-tabTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-tabTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   cursor: pointer;
   display: inline-block;
-  font-size: var(--k-tabFontSizeMedium, 16px);
-  line-height: var(--k-tabLineHeightMedium, 22px);
+  font-size: var(--k-tabFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  line-height: var(--k-tabLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
   margin-left: var(--k-tabPaddingXMedium, 10px);
   margin-right: var(--k-tabPaddingXMedium, 10px);
   padding-bottom: calc(var(--k-tabPaddingYMedium, 9px) - var(--k-tabBorderWidth, 2px));
@@ -5125,11 +5125,11 @@ button.react-ui-MenuItem__root {
 .react-ui-Tab__rootLarge {
   border-bottom: var(--k-tabBorderWidth, 2px) solid transparent;
   box-sizing: border-box;
-  color: var(--k-tabTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-tabTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   cursor: pointer;
   display: inline-block;
-  font-size: var(--k-tabFontSizeLarge, 18px);
-  line-height: var(--k-tabLineHeightLarge, 24px);
+  font-size: var(--k-tabFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  line-height: var(--k-tabLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
   margin-left: var(--k-tabPaddingXLarge, 12px);
   margin-right: var(--k-tabPaddingXLarge, 12px);
   padding-bottom: calc(var(--k-tabPaddingYLarge, 12px) - var(--k-tabBorderWidth, 2px));
@@ -5166,7 +5166,7 @@ button.react-ui-MenuItem__root {
   padding-right: var(--k-tabPaddingXLarge, 12px);
 }
 .react-ui-Tab__focusSmall {
-  border: var(--k-tabOutlineWidth, 2px) solid var(--k-tabColorFocus, var(--k-color-line-accent-bold, #484848));
+  border: var(--k-tabOutlineWidth, var(--k-controlOutlineWidth, 2px)) solid var(--k-tabColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   bottom: calc(-1 * var(--k-tabBorderWidth, 2px));
   left: calc(-1 * var(--k-tabPaddingXSmall, 8px));
   position: absolute;
@@ -5174,7 +5174,7 @@ button.react-ui-MenuItem__root {
   top: 0;
 }
 .react-ui-Tab__focusMedium {
-  border: var(--k-tabOutlineWidth, 2px) solid var(--k-tabColorFocus, var(--k-color-line-accent-bold, #484848));
+  border: var(--k-tabOutlineWidth, var(--k-controlOutlineWidth, 2px)) solid var(--k-tabColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   bottom: calc(-1 * var(--k-tabBorderWidth, 2px));
   left: calc(-1 * var(--k-tabPaddingXMedium, 10px));
   position: absolute;
@@ -5182,7 +5182,7 @@ button.react-ui-MenuItem__root {
   top: 0;
 }
 .react-ui-Tab__focusLarge {
-  border: var(--k-tabOutlineWidth, 2px) solid var(--k-tabColorFocus, var(--k-color-line-accent-bold, #484848));
+  border: var(--k-tabOutlineWidth, var(--k-controlOutlineWidth, 2px)) solid var(--k-tabColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848)));
   bottom: calc(-1 * var(--k-tabBorderWidth, 2px));
   left: calc(-1 * var(--k-tabPaddingXLarge, 12px));
   position: absolute;
@@ -5190,7 +5190,7 @@ button.react-ui-MenuItem__root {
   top: 0;
 }
 .react-ui-Tab__disabled {
-  color: color-mix(in srgb, var(--k-tabTextColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))), transparent 50%);
+  color: color-mix(in srgb, var(--k-tabTextColorDefault, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))), transparent 50%);
   cursor: default;
 }
 .react-ui-Tab__active {
@@ -5321,7 +5321,7 @@ button.react-ui-MenuItem__root {
   white-space: nowrap;
 }
 .react-ui-TimeFragments__mask {
-  color: var(--k-timePickerMaskColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-timePickerMaskColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 .react-ui-TimeFragments__segment {
   display: inline;
@@ -5432,7 +5432,7 @@ button.react-ui-MenuItem__root {
   color: var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
 }
 .react-ui-TimeInput__rightIconDisabled {
-  color: var(--k-inputTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-inputTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
 }
 /* components/TimePicker/TimePicker.css.ts */
 .react-ui-TimePicker__root {
@@ -5442,8 +5442,8 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-TimePicker__popup {
   background: var(--k-timePickerPopupBg, var(--k-color-shape-other-field, #ffffff));
-  border-radius: var(--k-timePickerPopupBorderRadius, 8px);
-  box-shadow: var(--k-timePickerPopupShadow, 0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12));
+  border-radius: var(--k-timePickerPopupBorderRadius, var(--k-menuBorderRadius, 8px));
+  box-shadow: var(--k-timePickerPopupShadow, var(--k-menuShadow, 0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12)));
   font-variant-numeric: tabular-nums;
   overflow: hidden;
 }
@@ -5489,8 +5489,8 @@ button.react-ui-MenuItem__root {
   border-radius: var(--k-toastBorderRadius, 8px);
   border: var(--k-toastBorder, none);
   display: inline-flex;
-  font-size: var(--k-toastFontSize, 14px);
-  line-height: var(--k-toastLineHeight, 20px);
+  font-size: var(--k-toastFontSize, var(--k-fontSizeSmall, 14px));
+  line-height: var(--k-toastLineHeight, var(--k-controlLineHeightSmall, 20px));
   opacity: 1;
   padding: var(--k-toastPaddingY, 10px) var(--k-toastPaddingX, 16px) var(--k-toastPaddingY, 10px);
   position: relative;
@@ -5501,7 +5501,7 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-ToastView__rootMobile {
   top: var(--k-mobileToastTop, 16px);
-  font-size: var(--k-mobileToastFontSize, 16px);
+  font-size: var(--k-mobileToastFontSize, var(--k-fontSizeMedium, 16px));
 }
 .react-ui-ToastView__default {
   background: var(--k-toastBg, var(--k-color-shape-heavy-neutral, #292929));
@@ -5602,15 +5602,15 @@ button.react-ui-MenuItem__root {
 /* components/Toggle/Toggle.css.ts */
 .react-ui-Toggle__rootSmall {
   line-height: var(--k-toggleHeightSmall, 20px);
-  font-size: var(--k-toggleFontSizeSmall, 14px);
+  font-size: var(--k-toggleFontSizeSmall, var(--k-fontSizeSmall, 14px));
 }
 .react-ui-Toggle__rootMedium {
   line-height: var(--k-toggleHeightMedium, 22px);
-  font-size: var(--k-toggleFontSizeMedium, 16px);
+  font-size: var(--k-toggleFontSizeMedium, var(--k-fontSizeMedium, 16px));
 }
 .react-ui-Toggle__rootLarge {
   line-height: var(--k-toggleHeightLarge, 24px);
-  font-size: var(--k-toggleFontSizeLarge, 18px);
+  font-size: var(--k-toggleFontSizeLarge, var(--k-fontSizeLarge, 18px));
 }
 .react-ui-Toggle__handleSmall {
   border-radius: var(--k-toggleHandleBorderRadiusSmall, 9px);
@@ -5628,19 +5628,19 @@ button.react-ui-MenuItem__root {
   width: var(--k-toggleHandleSizeLarge, 18px);
 }
 .react-ui-Toggle__containerSmall {
-  border-radius: var(--k-toggleBorderRadiusSmall, calc(20px * 0.5));
+  border-radius: var(--k-toggleBorderRadiusSmall, calc(var(--k-toggleHeightSmall, 20px) * 0.5));
 }
 .react-ui-Toggle__containerMedium {
-  border-radius: var(--k-toggleBorderRadiusMedium, calc(22px * 0.5));
+  border-radius: var(--k-toggleBorderRadiusMedium, calc(var(--k-toggleHeightMedium, 22px) * 0.5));
 }
 .react-ui-Toggle__containerLarge {
-  border-radius: var(--k-toggleBorderRadiusLarge, calc(24px * 0.5));
+  border-radius: var(--k-toggleBorderRadiusLarge, calc(var(--k-toggleHeightLarge, 24px) * 0.5));
 }
 .react-ui-Toggle__buttonSmall {
   height: var(--k-toggleHeightSmall, 20px);
   width: var(--k-toggleWidthSmall, 32px);
   flex: 1 0 var(--k-toggleWidthSmall, 32px);
-  border-radius: var(--k-toggleBorderRadiusSmall, calc(20px * 0.5));
+  border-radius: var(--k-toggleBorderRadiusSmall, calc(var(--k-toggleHeightSmall, 20px) * 0.5));
   line-height: var(--k-toggleHeightSmall, 20px);
   margin-top: calc(var(--k-toggleButtonOffsetY, 0px) + calc(var(--k-baseline-toggle, 0) * var(--k-labGrotesqueBaselineCompensation, 1) * 1px));
 }
@@ -5648,7 +5648,7 @@ button.react-ui-MenuItem__root {
   height: var(--k-toggleHeightMedium, 22px);
   width: var(--k-toggleWidthMedium, 34px);
   flex: 1 0 var(--k-toggleWidthMedium, 34px);
-  border-radius: var(--k-toggleBorderRadiusMedium, calc(22px * 0.5));
+  border-radius: var(--k-toggleBorderRadiusMedium, calc(var(--k-toggleHeightMedium, 22px) * 0.5));
   line-height: var(--k-toggleHeightMedium, 22px);
   margin-top: calc(var(--k-toggleButtonOffsetY, 0px) + calc(var(--k-baseline-toggle, 0) * var(--k-labGrotesqueBaselineCompensation, 1) * 1px));
 }
@@ -5656,37 +5656,37 @@ button.react-ui-MenuItem__root {
   height: var(--k-toggleHeightLarge, 24px);
   width: var(--k-toggleWidthLarge, 36px);
   flex: 1 0 var(--k-toggleWidthLarge, 36px);
-  border-radius: var(--k-toggleBorderRadiusLarge, calc(24px * 0.5));
+  border-radius: var(--k-toggleBorderRadiusLarge, calc(var(--k-toggleHeightLarge, 24px) * 0.5));
   line-height: var(--k-toggleHeightLarge, 24px);
   margin-top: calc(var(--k-toggleButtonOffsetY, 0px) + 0px);
 }
 .react-ui-Toggle__captionSmall {
   line-height: var(--k-toggleHeightSmall, 20px);
-  font-size: var(--k-toggleFontSizeSmall, 14px);
+  font-size: var(--k-toggleFontSizeSmall, var(--k-fontSizeSmall, 14px));
 }
 .react-ui-Toggle__captionMedium {
   line-height: var(--k-toggleHeightMedium, 22px);
-  font-size: var(--k-toggleFontSizeMedium, 16px);
+  font-size: var(--k-toggleFontSizeMedium, var(--k-fontSizeMedium, 16px));
 }
 .react-ui-Toggle__captionLarge {
   line-height: var(--k-toggleHeightLarge, 24px);
-  font-size: var(--k-toggleFontSizeLarge, 18px);
+  font-size: var(--k-toggleFontSizeLarge, var(--k-fontSizeLarge, 18px));
 }
 .react-ui-Toggle__subcaption {
   margin-top: 2px;
-  color: var(--k-toggleCommentTextColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56)));
+  color: var(--k-toggleCommentTextColor, var(--k-commentTextColor, var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.56))));
 }
 .react-ui-Toggle__subcaptionSmall {
-  font-size: var(--k-toggleCommentFontSizeSmall, 12px);
-  line-height: var(--k-toggleCommentLineHeightSmall, 16px);
+  font-size: var(--k-toggleCommentFontSizeSmall, var(--k-commentFontSizeSmall, 12px));
+  line-height: var(--k-toggleCommentLineHeightSmall, var(--k-commentLineHeightSmall, 16px));
 }
 .react-ui-Toggle__subcaptionMedium {
-  font-size: var(--k-toggleCommentFontSizeMedium, 14px);
-  line-height: var(--k-toggleCommentLineHeightMedium, 20px);
+  font-size: var(--k-toggleCommentFontSizeMedium, var(--k-commentFontSizeMedium, 14px));
+  line-height: var(--k-toggleCommentLineHeightMedium, var(--k-commentLineHeightMedium, 20px));
 }
 .react-ui-Toggle__subcaptionLarge {
-  font-size: var(--k-toggleCommentFontSizeLarge, 16px);
-  line-height: var(--k-toggleCommentLineHeightLarge, 22px);
+  font-size: var(--k-toggleCommentFontSizeLarge, var(--k-commentFontSizeLarge, 16px));
+  line-height: var(--k-toggleCommentLineHeightLarge, var(--k-commentLineHeightLarge, 22px));
 }
 .react-ui-Toggle__input {
   position: absolute;
@@ -5705,7 +5705,7 @@ button.react-ui-MenuItem__root {
   cursor: default;
 }
 .react-ui-Toggle__handle {
-  bottom: var(--k-toggleBorderWidth, 1px);
+  bottom: var(--k-toggleBorderWidth, var(--k-controlBorderWidth, 1px));
   left: var(--k-toggleHandleLeft, 3px);
   position: absolute;
   top: var(--k-toggleHandleTop, 3px);
@@ -5714,7 +5714,7 @@ button.react-ui-MenuItem__root {
   background: var(--k-toggleDisabledHandleBg, transparent) !important;
 }
 .react-ui-Toggle__container {
-  box-shadow: inset 0 0 0 var(--k-toggleBorderWidth, 1px) var(--k-toggleBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  box-shadow: inset 0 0 0 var(--k-toggleBorderWidth, var(--k-controlBorderWidth, 1px)) var(--k-toggleBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
   height: 100%;
   overflow: hidden;
   position: absolute;
@@ -5722,8 +5722,8 @@ button.react-ui-MenuItem__root {
   z-index: 0;
 }
 .react-ui-Toggle__containerDisabled {
-  background: var(--k-toggleBgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
-  box-shadow: inset 0 0 0 1px var(--k-toggleBorderColorDisabled, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  background: var(--k-toggleBgDisabled, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06))));
+  box-shadow: inset 0 0 0 1px var(--k-toggleBorderColorDisabled, var(--k-toggleBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
 }
 .react-ui-Toggle__button {
   position: absolute;
@@ -5737,20 +5737,20 @@ button.react-ui-MenuItem__root {
   left: auto;
 }
 .react-ui-Toggle__isWarning {
-  box-shadow: 0 0 0 1px var(--k-toggleOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-toggleOutlineWidth, 3px) var(--k-toggleShadowColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  box-shadow: 0 0 0 1px var(--k-toggleOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-toggleOutlineWidth, 3px) var(--k-toggleShadowColorWarning, var(--k-color-line-warning-bold, #fdaa00));
 }
 .react-ui-Toggle__isError {
-  box-shadow: 0 0 0 1px var(--k-toggleOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-toggleOutlineWidth, 3px) var(--k-toggleShadowColorError, var(--k-color-line-error-bold, #d6192a));
+  box-shadow: 0 0 0 1px var(--k-toggleOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-toggleOutlineWidth, 3px) var(--k-toggleShadowColorError, var(--k-color-line-error-bold, #d6192a));
 }
 .react-ui-Toggle__focused {
-  box-shadow: 0 0 0 1px var(--k-toggleOutlineColorFocus, var(--k-color-surface-base, #ffffff)), 0 0 0 var(--k-toggleOutlineWidth, 3px) var(--k-toggleFocusShadowColor, var(--k-color-line-accent-bold, #484848));
+  box-shadow: 0 0 0 1px var(--k-toggleOutlineColorFocus, var(--k-outlineColorFocus, var(--k-color-surface-base, #ffffff))), 0 0 0 var(--k-toggleOutlineWidth, 3px) var(--k-toggleFocusShadowColor, var(--k-color-line-accent-bold, #484848));
 }
 .react-ui-Toggle__caption {
-  color: var(--k-toggleTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-toggleTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   padding: 0 0 0 var(--k-toggleCaptionGap, 8px);
 }
 .react-ui-Toggle__captionLeft {
-  color: var(--k-toggleTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-toggleTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   padding: 0 var(--k-toggleCaptionGap, 8px) 0 0;
 }
 .react-ui-Toggle__disabledCaption {
@@ -5810,7 +5810,7 @@ button.react-ui-MenuItem__root {
   box-shadow: var(--k-toggleHandleBoxShadow, 0 0 0 1px var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
 }
 .react-ui-Toggle__input:enabled:checked~.react-ui-toggle-container {
-  background: var(--k-toggleContainerBgChecked, var(--k-color-shape-bold-accent, #3d3d3d));
+  background: var(--k-toggleContainerBgChecked, var(--k-toggleBgChecked, var(--k-color-shape-bold-accent, #3d3d3d)));
   box-shadow: var(--k-toggleContainerBoxShadowChecked, none);
 }
 .react-ui-Toggle__input:enabled:checked~.react-ui-toggle-handle {
@@ -5818,7 +5818,7 @@ button.react-ui-MenuItem__root {
   box-shadow: var(--k-toggleHandleBoxShadowChecked, none);
 }
 .react-ui-Toggle__input:enabled:hover:not(:checked)~.react-ui-toggle-container {
-  background: var(--k-toggleContainerBgHover, var(--k-color-shape-other-field-hover, #f2f2f2));
+  background: var(--k-toggleContainerBgHover, var(--k-toggleBgHover, var(--k-color-shape-other-field-hover, #f2f2f2)));
   box-shadow: var(--k-toggleContainerBoxShadowHover, inset 0 0 0 1px var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24)));
 }
 .react-ui-Toggle__input:enabled:hover:not(:checked)~.react-ui-toggle-handle {
@@ -5873,20 +5873,20 @@ button.react-ui-MenuItem__root {
 .react-ui-Token__tokenSmall {
   padding: var(--k-tokenPaddingYSmall, 1px) var(--k-tokenPaddingXSmall, 3px);
   margin: var(--k-tokenMarginYSmall, 2px) var(--k-tokenMarginXSmall, 1px);
-  line-height: var(--k-tokenLineHeightSmall, 20px);
-  font-size: var(--k-tokenFontSizeSmall, 14px);
+  line-height: var(--k-tokenLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  font-size: var(--k-tokenFontSizeSmall, var(--k-fontSizeSmall, 14px));
 }
 .react-ui-Token__tokenMedium {
   padding: var(--k-tokenPaddingYMedium, 2px) var(--k-tokenPaddingXMedium, 5px);
   margin: var(--k-tokenMarginYMedium, 2px) var(--k-tokenMarginXMedium, 2px);
-  line-height: var(--k-tokenLineHeightMedium, 22px);
-  font-size: var(--k-tokenFontSizeMedium, 16px);
+  line-height: var(--k-tokenLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
+  font-size: var(--k-tokenFontSizeMedium, var(--k-fontSizeMedium, 16px));
 }
 .react-ui-Token__tokenLarge {
   padding: var(--k-tokenPaddingYLarge, 3px) var(--k-tokenPaddingXLarge, 7px);
   margin: var(--k-tokenMarginYLarge, 2px) var(--k-tokenMarginXLarge, 3px);
-  line-height: var(--k-tokenLineHeightLarge, 24px);
-  font-size: var(--k-tokenFontSizeLarge, 18px);
+  line-height: var(--k-tokenLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
+  font-size: var(--k-tokenFontSizeLarge, var(--k-fontSizeLarge, 18px));
 }
 .react-ui-Token__tokenIdle {
   color: var(--k-tokenColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
@@ -5900,17 +5900,17 @@ button.react-ui-MenuItem__root {
   border: solid var(--k-tokenBorderWidth, 1px) var(--k-tokenBorderColorActive, transparent);
 }
 .react-ui-Token__tokenError {
-  border: solid var(--k-tokenBorderWidth, 1px) var(--k-tokenBorderColorError, var(--k-color-line-error-bold, #d6192a));
-  box-shadow: 0 0 0 var(--k-tokenOutlineWidth, 1px) var(--k-tokenBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border: solid var(--k-tokenBorderWidth, 1px) var(--k-tokenBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
+  box-shadow: 0 0 0 var(--k-tokenOutlineWidth, 1px) var(--k-tokenBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a)));
 }
 .react-ui-Token__tokenWarning {
-  border: solid var(--k-tokenBorderWidth, 1px) var(--k-tokenBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
-  box-shadow: 0 0 0 var(--k-tokenOutlineWidth, 1px) var(--k-tokenBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border: solid var(--k-tokenBorderWidth, 1px) var(--k-tokenBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
+  box-shadow: 0 0 0 var(--k-tokenOutlineWidth, 1px) var(--k-tokenBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00)));
 }
 .react-ui-Token__tokenDisabled {
   user-select: text;
   cursor: text;
-  color: var(--k-tokenTextColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-tokenTextColorDisabled, var(--k-textColorDisabled, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))));
   pointer-events: none;
   border: solid 1px var(--k-tokenBorderColorDisabled, transparent);
 }
@@ -5956,7 +5956,7 @@ button.react-ui-MenuItem__root {
   cursor: pointer;
 }
 .react-ui-Token__tokenHover:hover {
-  color: var(--k-tokenColorHover, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-tokenColorHover, var(--k-tokenColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))));
   background: var(--k-tokenBgHover, var(--k-color-shape-faint-neutral-alpha-hover, rgba(0, 0, 0, 0.12)));
   border: solid var(--k-tokenBorderWidth, 1px) var(--k-tokenBorderColorHover, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
 }
@@ -5968,10 +5968,10 @@ button.react-ui-MenuItem__root {
 }
 /* components/TokenInput/TokenInput.css.ts */
 .react-ui-TokenInput__label {
-  background-color: var(--k-tokenInputBg, var(--k-color-shape-other-field, #ffffff));
-  box-shadow: var(--k-tokenInputShadow, none);
-  border: var(--k-tokenInputBorderWidth, 1px) solid var(--k-tokenInputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
-  border-top-color: var(--k-tokenInputBorderTopColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)));
+  background-color: var(--k-tokenInputBg, var(--k-inputBg, var(--k-color-shape-other-field, #ffffff)));
+  box-shadow: var(--k-tokenInputShadow, var(--k-inputShadow, none));
+  border: var(--k-tokenInputBorderWidth, var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px))) solid var(--k-tokenInputBorderColor, var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16))));
+  border-top-color: var(--k-tokenInputBorderTopColor, var(--k-inputBorderTopColor, var(--k-inputBorderColor, var(--k-color-line-neutral-pale, rgba(0, 0, 0, 0.16)))));
   transition: border-color var(--k-transitionDuration, 100ms) var(--k-transitionTimingFunction, cubic-bezier(0.5, 1, 0.89, 1));
   box-sizing: border-box;
   cursor: text;
@@ -5992,13 +5992,13 @@ button.react-ui-MenuItem__root {
   padding: var(--k-tokenInputPaddingYLarge, 5px) var(--k-tokenInputPaddingXLarge, 4px);
 }
 .react-ui-TokenInput__labelFocused {
-  border: var(--k-tokenInputBorderWidth, 1px) solid var(--k-tokenInputBorderColorFocus, var(--k-color-line-accent-bold, #484848));
-  box-shadow: 0 0 0 var(--k-tokenInputOutlineWidth, calc(2px - 1px)) var(--k-tokenInputBorderColorFocus, var(--k-color-line-accent-bold, #484848));
+  border: var(--k-tokenInputBorderWidth, var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px))) solid var(--k-tokenInputBorderColorFocus, var(--k-inputBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848))));
+  box-shadow: 0 0 0 var(--k-tokenInputOutlineWidth, var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px))) var(--k-tokenInputBorderColorFocus, var(--k-inputBorderColorFocus, var(--k-borderColorFocus, var(--k-color-line-accent-bold, #484848))));
 }
 .react-ui-TokenInput__labelDisabled {
-  background: var(--k-tokenInputDisabledBg, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)));
+  background: var(--k-tokenInputDisabledBg, var(--k-inputDisabledBg, var(--k-bgDisabled, var(--k-color-shape-other-disabled, rgba(0, 0, 0, 0.06)))));
   background-clip: var(--k-inputDisabledBackgroundClip, padding-box);
-  border-color: var(--k-tokenInputDisabledBorderColor, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)));
+  border-color: var(--k-tokenInputDisabledBorderColor, var(--k-inputDisabledBorderColor, var(--k-borderColorDisabled, var(--k-color-line-neutral-faint, rgba(0, 0, 0, 0.08)))));
   box-shadow: none;
   cursor: default;
 }
@@ -6017,7 +6017,7 @@ button.react-ui-MenuItem__root {
   text-overflow: clip;
   background-clip: padding-box;
   transition: background-color 0.15s ease-in;
-  color: var(--k-tokenInputTextColor, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)));
+  color: var(--k-tokenInputTextColor, var(--k-inputTextColor, var(--k-textColorDefault, var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88)))));
   box-sizing: border-box;
   word-break: break-all;
   padding: 0;
@@ -6025,24 +6025,24 @@ button.react-ui-MenuItem__root {
   flex: 1 1 100%;
 }
 .react-ui-TokenInput__inputSmall {
-  font-size: var(--k-tokenFontSizeSmall, 14px);
-  height: var(--k-tokenInputLineHeightSmall, 20px);
-  line-height: var(--k-tokenInputLineHeightSmall, 20px);
+  font-size: var(--k-tokenFontSizeSmall, var(--k-fontSizeSmall, 14px));
+  height: var(--k-tokenInputLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
+  line-height: var(--k-tokenInputLineHeightSmall, var(--k-controlLineHeightSmall, 20px));
 }
 .react-ui-TokenInput__inputMedium {
-  font-size: var(--k-tokenFontSizeMedium, 16px);
-  height: var(--k-tokenInputLineHeightMedium, 22px);
-  line-height: var(--k-tokenInputLineHeightMedium, 22px);
+  font-size: var(--k-tokenFontSizeMedium, var(--k-fontSizeMedium, 16px));
+  height: var(--k-tokenInputLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
+  line-height: var(--k-tokenInputLineHeightMedium, var(--k-controlLineHeightMedium, 22px));
 }
 .react-ui-TokenInput__inputLarge {
-  font-size: var(--k-tokenFontSizeLarge, 18px);
-  height: var(--k-tokenInputLineHeightLarge, 24px);
-  line-height: var(--k-tokenInputLineHeightLarge, 24px);
+  font-size: var(--k-tokenFontSizeLarge, var(--k-fontSizeLarge, 18px));
+  height: var(--k-tokenInputLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
+  line-height: var(--k-tokenInputLineHeightLarge, var(--k-controlLineHeightLarge, 24px));
 }
 .react-ui-TokenInput__inputDisabled {
   pointer-events: none;
   -webkit-text-fill-color: currentcolor;
-  color: var(--k-tokenInputTextColorDisabled, #858585);
+  color: var(--k-tokenInputTextColorDisabled, var(--k-textColorDisabledContrast, #858585));
 }
 .react-ui-TokenInput__inputWrapperDisabled, .react-ui-TokenInput__inputWrapperDisabled:hover {
   cursor: default;
@@ -6055,34 +6055,34 @@ button.react-ui-MenuItem__root {
 }
 .react-ui-TokenInput__reservedInput {
   min-width: 2px;
-  color: var(--k-tokenInputTextColorDisabled, #858585);
+  color: var(--k-tokenInputTextColorDisabled, var(--k-textColorDisabledContrast, #858585));
   word-break: break-all;
 }
 .react-ui-TokenInput__error {
-  border: var(--k-tokenInputBorderWidth, 1px) solid var(--k-tokenInputBorderColorError, var(--k-color-line-error-bold, #d6192a));
-  box-shadow: 0 0 0 var(--k-tokenInputOutlineWidth, calc(2px - 1px)) var(--k-tokenInputBorderColorError, var(--k-color-line-error-bold, #d6192a));
+  border: var(--k-tokenInputBorderWidth, var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px))) solid var(--k-tokenInputBorderColorError, var(--k-inputBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a))));
+  box-shadow: 0 0 0 var(--k-tokenInputOutlineWidth, var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px))) var(--k-tokenInputBorderColorError, var(--k-inputBorderColorError, var(--k-borderColorError, var(--k-color-line-error-bold, #d6192a))));
 }
 .react-ui-TokenInput__warning {
-  border: var(--k-tokenInputBorderWidth, 1px) solid var(--k-tokenInputBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
-  box-shadow: 0 0 0 var(--k-tokenInputOutlineWidth, calc(2px - 1px)) var(--k-tokenInputBorderColorWarning, var(--k-color-line-warning-bold, #fdaa00));
+  border: var(--k-tokenInputBorderWidth, var(--k-inputBorderWidth, var(--k-controlBorderWidth, 1px))) solid var(--k-tokenInputBorderColorWarning, var(--k-inputBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00))));
+  box-shadow: 0 0 0 var(--k-tokenInputOutlineWidth, var(--k-inputOutlineWidth, calc(var(--k-controlOutlineWidth, 2px) - 1px))) var(--k-tokenInputBorderColorWarning, var(--k-inputBorderColorWarning, var(--k-borderColorWarning, var(--k-color-line-warning-bold, #fdaa00))));
 }
 .react-ui-TokenInput__hovering:hover {
-  border-color: var(--k-tokenInputBorderColorHover, var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24)));
+  border-color: var(--k-tokenInputBorderColorHover, var(--k-inputBorderColorHover, var(--k-color-line-neutral-pale-hover, rgba(0, 0, 0, 0.24))));
 }
 .react-ui-TokenInput__input::-ms-clear {
   display: none;
 }
 .react-ui-TokenInput__input::placeholder {
-  color: var(--k-tokenInputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
-  -webkit-text-fill-color: var(--k-tokenInputPlaceholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)));
+  color: var(--k-tokenInputPlaceholderColor, var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)))));
+  -webkit-text-fill-color: var(--k-tokenInputPlaceholderColor, var(--k-inputPlaceholderColor, var(--k-placeholderColor, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)))));
 }
 .react-ui-TokenInput__input:disabled::placeholder {
-  color: var(--k-tokenInputPlaceholderColorDisabled, #858585);
-  -webkit-text-fill-color: var(--k-tokenInputPlaceholderColorDisabled, #858585);
+  color: var(--k-tokenInputPlaceholderColorDisabled, var(--k-textColorDisabledContrast, #858585));
+  -webkit-text-fill-color: var(--k-tokenInputPlaceholderColorDisabled, var(--k-textColorDisabledContrast, #858585));
 }
 .react-ui-TokenInput__input:focus::placeholder {
-  color: var(--k-tokenInputPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
-  -webkit-text-fill-color: var(--k-tokenInputPlaceholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%));
+  color: var(--k-tokenInputPlaceholderColorLight, var(--k-inputPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%))));
+  -webkit-text-fill-color: var(--k-tokenInputPlaceholderColorLight, var(--k-inputPlaceholderColorLight, var(--k-placeholderColorLight, color-mix(in srgb, var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32)), transparent 40%))));
 }
 .react-ui-TokenInput__input:-moz-placeholder {
   opacity: 1;