@skbkontur/react-ui 0.0.0-c2bf15a894 → 0.0.0-c5bd33d001

package/internal/themes/BasicTheme/BasicTheme.js

@@ -0,0 +1,3510 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+var _BasicThemeClass;
+import { createTheme } from "../../../lib/theming/ThemeHelpers";
+import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
+export var BasicThemeClass = /*#__PURE__*/function () {
+  function BasicThemeClass() {}
+  return _createClass(BasicThemeClass, null, [{
+    key: "bgSecondary",
+    get: function get() {
+      return this.bgDefault;
+    }
+  }, {
+    key: "errorMain",
+    get: function get() {
+      return this.red;
+    }
+  }, {
+    key: "errorText",
+    get: function get() {
+      return this.redDark;
+    }
+  }, {
+    key: "errorSecondary",
+    get: function get() {
+      return this.redXxLight;
+    }
+  }, {
+    key: "borderColorError",
+    get: function get() {
+      return this.errorMain;
+    }
+  }, {
+    key: "borderColorWarning",
+    get: function get() {
+      return this.warningMain;
+    }
+  }, {
+    key: "linkHoverColor",
+    get: function get() {
+      return this.linkColor;
+    }
+  }, {
+    key: "linkSuccessColor",
+    get: function get() {
+      return this.green;
+    }
+  }, {
+    key: "linkSuccessHoverColor",
+    get: function get() {
+      return this.greenDark;
+    }
+  }, {
+    key: "linkDangerColor",
+    get: function get() {
+      return this.errorText;
+    }
+  }, {
+    key: "linkDisabledColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "linkHoverTextDecorationStyle",
+    get: function get() {
+      return this.linkTextDecorationStyle;
+    }
+  }, {
+    key: "linkLineHoverBorderBottomStyle",
+    get: function get() {
+      return this.linkLineBorderBottomStyle;
+    }
+  }, {
+    key: "linkFocusOutlineWidth",
+    get: function get() {
+      return this.controlOutlineWidth;
+    }
+  }, {
+    key: "linkFocusOutline",
+    get: function get() {
+      return this.linkFocusOutlineWidth + " solid " + this.linkFocusOutlineColor;
+    }
+
+    //#endregion Link
+    //#region Token
+  }, {
+    key: "tokenTextColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "tokenFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "tokenFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "tokenFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "tokenLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "tokenLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "tokenLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "tokenBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "tokenBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "tokenPaddingYDisabled",
+    get: function get() {
+      return this.tokenPaddingYSmall;
+    }
+  }, {
+    key: "tokenPaddingXDisabled",
+    get: function get() {
+      return this.tokenPaddingXSmall;
+    }
+  }, {
+    key: "tokenMarginYDisabled",
+    get: function get() {
+      return this.tokenMarginYSmall;
+    }
+  }, {
+    key: "tokenMarginXDisabled",
+    get: function get() {
+      return this.tokenMarginXSmall;
+    }
+  }, {
+    key: "tokenInputLineHeightSmall",
+    get:
+    //#endregion Token
+    //#region TokenInput
+
+    function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "tokenInputLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "tokenInputLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "tokenInputBorderColor",
+    get: function get() {
+      return this.inputBorderColor;
+    }
+  }, {
+    key: "tokenInputBorderColorHover",
+    get: function get() {
+      return this.inputBorderColorHover;
+    }
+  }, {
+    key: "tokenInputBorderColorFocus",
+    get: function get() {
+      return this.inputBorderColorFocus;
+    }
+  }, {
+    key: "tokenInputBorderColorError",
+    get: function get() {
+      return this.inputBorderColorError;
+    }
+  }, {
+    key: "tokenInputBorderColorWarning",
+    get: function get() {
+      return this.inputBorderColorWarning;
+    }
+  }, {
+    key: "tokenInputBorderTopColor",
+    get: function get() {
+      return this.inputBorderTopColor;
+    }
+  }, {
+    key: "tokenInputPlaceholderColor",
+    get: function get() {
+      return this.inputPlaceholderColor;
+    }
+  }, {
+    key: "tokenInputPlaceholderColorLight",
+    get: function get() {
+      return this.inputPlaceholderColorLight;
+    }
+  }, {
+    key: "tokenInputDisabledBg",
+    get: function get() {
+      return this.inputDisabledBg;
+    }
+  }, {
+    key: "tokenInputDisabledBorderColor",
+    get: function get() {
+      return this.inputDisabledBorderColor;
+    }
+  }, {
+    key: "tokenInputBorderWidth",
+    get: function get() {
+      return this.inputBorderWidth;
+    }
+  }, {
+    key: "tokenInputOutlineWidth",
+    get: function get() {
+      return this.inputOutlineWidth;
+    }
+  }, {
+    key: "tokenInputBg",
+    get: function get() {
+      return this.inputBg;
+    }
+  }, {
+    key: "tokenInputShadow",
+    get: function get() {
+      return this.inputShadow;
+    }
+  }, {
+    key: "tokenInputTextColor",
+    get: function get() {
+      return this.inputTextColor;
+    }
+  }, {
+    key: "tokenInputTextColorDisabled",
+    get: function get() {
+      return this.textColorDisabledContrast;
+    }
+  }, {
+    key: "tokenInputPlaceholderColorDisabled",
+    get: function get() {
+      return this.textColorDisabledContrast;
+    }
+  }, {
+    key: "btnCheckedDisabledBorderColor",
+    get: function get() {
+      return this.btnCheckedDisabledBg;
+    }
+  }, {
+    key: "btnBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "btnOutlineWidth",
+    get: function get() {
+      return this.controlOutlineWidth;
+    }
+  }, {
+    key: "btnIconGapSmallRight",
+    get: function get() {
+      return this.btnIconGapSmallLeft;
+    }
+  }, {
+    key: "btnIconGapMediumRight",
+    get: function get() {
+      return this.btnIconGapMediumLeft;
+    }
+  }, {
+    key: "btnIconGapLargeRight",
+    get: function get() {
+      return this.btnIconGapLargeLeft;
+    }
+  }, {
+    key: "btnDefaultCheckedBorderColor",
+    get: function get() {
+      return this.btnCheckedBg;
+    }
+  }, {
+    key: "btnDefaultTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "btnDefaultHoverBorderColor",
+    get: function get() {
+      return this.btnDefaultBorderColor;
+    }
+  }, {
+    key: "btnDefaultActiveBorderColor",
+    get: function get() {
+      return this.btnDefaultBorderColor;
+    }
+  }, {
+    key: "btnDangerBg",
+    get: function get() {
+      return this.errorMain;
+    }
+  }, {
+    key: "btnDangerBorderColor",
+    get: function get() {
+      return this.btnDangerBg;
+    }
+  }, {
+    key: "btnDangerActiveBorderColor",
+    get: function get() {
+      return this.btnDangerActiveBg;
+    }
+  }, {
+    key: "btnPayTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "btnFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "btnFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "btnFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "btnLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "btnLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "btnLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "btnPaddingYSmall",
+    get: function get() {
+      return this.controlPaddingYSmall;
+    }
+  }, {
+    key: "btnPaddingYMedium",
+    get: function get() {
+      return this.controlPaddingYMedium;
+    }
+  }, {
+    key: "btnPaddingYLarge",
+    get: function get() {
+      return this.controlPaddingYLarge;
+    }
+  }, {
+    key: "btnBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "btnBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "btnHeightSmall",
+    get: function get() {
+      var borderWidth = parseInt(this.btnBorderWidth, 10) || 0;
+      var padding = parseInt(this.btnPaddingYSmall, 10) || 0;
+      var lineHeigh = parseInt(this.btnLineHeightSmall, 10) || 0;
+      return 2 * borderWidth + 2 * padding + lineHeigh + "px";
+    }
+  }, {
+    key: "btnHeightMedium",
+    get: function get() {
+      var borderWidth = parseInt(this.btnBorderWidth, 10) || 0;
+      var padding = parseInt(this.btnPaddingYMedium, 10) || 0;
+      var lineHeigh = parseInt(this.btnLineHeightMedium, 10) || 0;
+      return 2 * borderWidth + 2 * padding + lineHeigh + "px";
+    }
+  }, {
+    key: "btnHeightLarge",
+    get: function get() {
+      var borderWidth = parseInt(this.btnBorderWidth, 10) || 0;
+      var padding = parseInt(this.btnPaddingYLarge, 10) || 0;
+      var lineHeigh = parseInt(this.btnLineHeightLarge, 10) || 0;
+      return 2 * borderWidth + 2 * padding + lineHeigh + "px";
+    }
+  }, {
+    key: "btnLinkColor",
+    get: function get() {
+      return this.linkColor;
+    }
+  }, {
+    key: "btnLinkHoverColor",
+    get: function get() {
+      return this.linkHoverColor;
+    }
+  }, {
+    key: "btnLinkActiveColor",
+    get: function get() {
+      return this.linkActiveColor;
+    }
+  }, {
+    key: "btnLinkHoverTextDecoration",
+    get: function get() {
+      return this.linkHoverTextDecoration;
+    }
+  }, {
+    key: "btnLinkTextDecorationColor",
+    get: function get() {
+      return this.linkTextDecorationColor;
+    }
+  }, {
+    key: "btnLinkTextDecorationStyle",
+    get: function get() {
+      return this.linkTextDecorationStyle;
+    }
+  }, {
+    key: "btnLinkHoverTextDecorationStyle",
+    get: function get() {
+      return this.linkTextDecorationStyle;
+    }
+  }, {
+    key: "btnLinkTextUnderlineOffset",
+    get: function get() {
+      return this.linkTextUnderlineOffset;
+    }
+  }, {
+    key: "btnLinkTextDecorationThickness",
+    get: function get() {
+      return this.linkTextDecorationThickness;
+    }
+  }, {
+    key: "btnLinkTextUnderlineOpacity",
+    get: function get() {
+      return this.linkTextUnderlineOpacity;
+    }
+  }, {
+    key: "btnLinkLineBorderBottomStyle",
+    get: function get() {
+      return this.linkLineBorderBottomStyle;
+    }
+  }, {
+    key: "btnLinkHoverLineBorderBottomStyle",
+    get: function get() {
+      return this.btnLinkLineBorderBottomStyle;
+    }
+  }, {
+    key: "btnLinkLineBorderBottomWidth",
+    get: function get() {
+      return this.linkLineBorderBottomWidth;
+    }
+  }, {
+    key: "btnLinkLineBorderBottomOpacity",
+    get: function get() {
+      return this.linkLineBorderBottomOpacity;
+    }
+  }, {
+    key: "btnLinkIconMarginRight",
+    get: function get() {
+      return this.linkIconMarginRight;
+    }
+  }, {
+    key: "btnLinkIconMarginLeft",
+    get: function get() {
+      return this.linkIconMarginRight;
+    }
+  }, {
+    key: "btnErrorSecondary",
+    get: function get() {
+      return this.errorSecondary;
+    }
+  }, {
+    key: "btnWarningSecondary",
+    get: function get() {
+      return this.warningSecondary;
+    }
+  }, {
+    key: "btnOutlineColorFocus",
+    get: function get() {
+      return this.outlineColorFocus;
+    }
+  }, {
+    key: "btnBorderColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "btnLinkDisabledColor",
+    get: function get() {
+      return this.linkDisabledColor;
+    }
+  }, {
+    key: "btnDisabledTextColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "btnBacklessActiveBorderColor",
+    get: function get() {
+      return this.btnBacklessBorderColor;
+    }
+  }, {
+    key: "btnBacklessBorderColor",
+    get: function get() {
+      return this.btnDefaultBorderColor;
+    }
+  }, {
+    key: "btnBacklessDisabledBorderColor",
+    get: function get() {
+      return this.btnDisabledBorderColor;
+    }
+  }, {
+    key: "btnBacklessHoverBorderColor",
+    get: function get() {
+      return this.btnBacklessBorderColor;
+    }
+  }, {
+    key: "btnBacklessTextColor",
+    get: function get() {
+      return this.btnDefaultTextColor;
+    }
+  }, {
+    key: "btnTextBorderColor",
+    get: function get() {
+      return this.btnDefaultBorderColor;
+    }
+  }, {
+    key: "btnTextTextColor",
+    get: function get() {
+      return this.btnDefaultTextColor;
+    }
+  }, {
+    key: "btnTextHoverBorderColor",
+    get: function get() {
+      return this.btnTextHoverBg;
+    }
+  }, {
+    key: "selectDefaultBg",
+    get:
+    //#endregion Button
+    //#region Select
+    function get() {
+      return this.inputBg;
+    }
+  }, {
+    key: "selectBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "selectPlaceholderColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "selectOutlineWidth",
+    get: function get() {
+      return this.controlOutlineWidth;
+    }
+  }, {
+    key: "selectLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "selectFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "selectPaddingYSmall",
+    get: function get() {
+      return this.controlPaddingYSmall;
+    }
+  }, {
+    key: "selectBorderRadiusSmall",
+    get: function get() {
+      return this.inputBorderRadiusSmall;
+    }
+  }, {
+    key: "selectBorderRadiusMedium",
+    get: function get() {
+      return this.inputBorderRadiusMedium;
+    }
+  }, {
+    key: "selectBorderRadiusLarge",
+    get: function get() {
+      return this.inputBorderRadiusLarge;
+    }
+  }, {
+    key: "selectIconGapSmall",
+    get: function get() {
+      return this.inputIconGapSmall;
+    }
+  }, {
+    key: "selectIconGapMedium",
+    get: function get() {
+      return this.inputIconGapMedium;
+    }
+  }, {
+    key: "selectIconGapLarge",
+    get: function get() {
+      return this.inputIconGapLarge;
+    }
+  }, {
+    key: "selectLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "selectFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "selectPaddingYMedium",
+    get: function get() {
+      return this.controlPaddingYMedium;
+    }
+  }, {
+    key: "selectLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "selectFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "selectPaddingYLarge",
+    get: function get() {
+      return this.controlPaddingYLarge;
+    }
+  }, {
+    key: "selectMenuArrowColor",
+    get: function get() {
+      return this.btnMenuArrowColor;
+    }
+  }, {
+    key: "selectMenuArrowColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "selectIconSizeSmall",
+    get: function get() {
+      return this.btnIconSizeSmall;
+    }
+  }, {
+    key: "selectIconSizeMedium",
+    get: function get() {
+      return this.btnIconSizeMedium;
+    }
+  }, {
+    key: "selectIconSizeLarge",
+    get: function get() {
+      return this.btnIconSizeLarge;
+    }
+  }, {
+    key: "selectTextColorDisabled",
+    get: function get() {
+      return this.btnDisabledTextColor;
+    }
+  }, {
+    key: "selectBgDisabled",
+    get: function get() {
+      return this.inputDisabledBg;
+    }
+  }, {
+    key: "selectBorderColorDisabled",
+    get: function get() {
+      return this.btnDisabledBorderColor;
+    }
+  }, {
+    key: "selectMenuOffsetY",
+    get: function get() {
+      return this.menuOffsetY;
+    }
+  }, {
+    key: "selectBorderColorHover",
+    get: function get() {
+      return this.btnDefaultHoverBorderColor;
+    }
+  }, {
+    key: "tooltipTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "tooltipBorder",
+    get: function get() {
+      return this.popupBorder;
+    }
+  }, {
+    key: "tooltipPinSize",
+    get: function get() {
+      return this.popupPinSize;
+    }
+  }, {
+    key: "tooltipFontSize",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "tooltipLineHeight",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+    //#endregion Tooltip
+    //#region TooltipMenu
+  }, {
+    key: "tooltipMenuPinOffsetX",
+    get: function get() {
+      return this.tooltipPinOffsetX;
+    }
+  }, {
+    key: "tooltipMenuPinOffsetY",
+    get: function get() {
+      return this.tooltipPinOffsetY;
+    }
+  }, {
+    key: "tooltipMenuMargin",
+    get: function get() {
+      return this.popupMargin;
+    }
+  }, {
+    key: "tooltipMenuPinSize",
+    get: function get() {
+      return this.popupPinSize;
+    }
+
+    //#endregion
+    //#region Kebab
+  }, {
+    key: "modalBg",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "modalFixedHeaderBg",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "modalFixedHeaderShadow",
+    get: function get() {
+      return this.fixedPanelShadow;
+    }
+  }, {
+    key: "modalFixedFooterShadow",
+    get: function get() {
+      return this.fixedPanelShadow;
+    }
+  }, {
+    key: "modalFooterBg",
+    get: function get() {
+      return this.modalBg;
+    }
+  }, {
+    key: "modalHeaderTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "modalHeaderAdditionalPaddingBottom",
+    get: function get() {
+      return this.modalHeaderPaddingBottom;
+    }
+  }, {
+    key: "modalFixedHeaderPaddingBottom",
+    get: function get() {
+      return this.modalHeaderPaddingBottom;
+    }
+  }, {
+    key: "modalFixedFooterPaddingTop",
+    get: function get() {
+      return this.modalFooterPanelPaddingTop;
+    }
+  }, {
+    key: "modalFooterPanelPaddingBottom",
+    get: function get() {
+      return this.modalFooterPaddingBottom;
+    }
+  }, {
+    key: "mobileModalWithoutHeaderCloseButtonWidth",
+    get: function get() {
+      return parseInt(this.modalCloseIconSize) + 2 * parseInt(this.mobileModalWithoutHeaderCloseButtonPadding) + "px";
+    }
+  }, {
+    key: "sidePageFooterPanelBg",
+    get:
+    //#endregion
+    //#region SidePage
+    function get() {
+      return this.sidePageBgDefault;
+    }
+  }, {
+    key: "sidePageHeaderTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "sidePageFooterPanelPaddingTop",
+    get: function get() {
+      return this.sidePageFooterPaddingTop;
+    }
+  }, {
+    key: "sidePageFooterPanelPaddingBottom",
+    get: function get() {
+      return this.sidePageFooterPanelPaddingTop;
+    }
+  }, {
+    key: "sidePageCloseButtonFixedClickAreaTop",
+    get: function get() {
+      return this.sidePageCloseButtonFixedClickAreaBottom;
+    }
+  }, {
+    key: "sidePageFixedHeaderShadow",
+    get: function get() {
+      return this.fixedPanelShadow;
+    }
+  }, {
+    key: "sidePageFixedFooterShadow",
+    get: function get() {
+      return this.fixedPanelShadow;
+    }
+  }, {
+    key: "dateInputIconColor",
+    get:
+    //#endregion SidePage
+    //#region DateInput
+    function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "calendarBottomSeparatorBorderColor",
+    get:
+    //#endregion DateInput
+    //#region Calendar
+    function get() {
+      return ColorFunctions.fade(this.calendarMonthTitleBorderBottomColor, 1);
+    }
+  }, {
+    key: "calendarBottomSeparatorBorderWidth",
+    get: function get() {
+      return '1px';
+    }
+  }, {
+    key: "calendarBottomSeparatorBorder",
+    get: function get() {
+      return this.calendarBottomSeparatorBorderWidth + " solid " + this.calendarBottomSeparatorBorderColor;
+    }
+  }, {
+    key: "calendarBg",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "calendarCellBg",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "calendarCellWeekendColor",
+    get: function get() {
+      return this.errorText;
+    }
+  }, {
+    key: "calendarCellWidth",
+    get: function get() {
+      return this.calendarCellHeight;
+    }
+  }, {
+    key: "calendarCellLineHeight",
+    get: function get() {
+      return parseInt(this.calendarCellHeight) - 2 + "px";
+    }
+  }, {
+    key: "calendarMonthHeaderStickedBgColor",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "datePickerOpenBtnColor",
+    get:
+    //#endregion Calendar
+    //#region DatePicker
+    function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "datePickerMenuOffsetY",
+    get: function get() {
+      return this.menuOffsetY;
+    }
+  }, {
+    key: "dateSelectMenuBg",
+    get:
+    //#endregion
+
+    //#region DateSelect
+    function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "dateSelectMenuItemBgDisabled",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "dateSelectMenuItemFontSelected",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "dateSelectMenuItemFontDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "dateSelectTextColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "dateSelectTextColorDefault",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "dateSelectLinkColor",
+    get: function get() {
+      return this.linkColor;
+    }
+  }, {
+    key: "dateSelectPopupBoxShadow",
+    get: function get() {
+      return this.popupBoxShadow;
+    }
+  }, {
+    key: "pagingFontSize",
+    get:
+    //#endregion DateSelect
+    //#region Paging
+    /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
+     * @see {@link pagingFontSizeSmall `pagingFontSizeSmall`} */
+    function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "pagingFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "pagingFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "pagingFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+    /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
+     * @see {@link pagingLineHeightSmall `pagingLineHeightSmall`} */
+  }, {
+    key: "pagingLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "pagingLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "pagingLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "pagingPageLinkColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "pagingPageLinkActiveColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "pagingPageForwardLinkPaddingRight",
+    get: /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
+    function get() {
+      return this.pagingPageLinkPaddingX;
+    }
+  }, {
+    key: "pagingForwardIconSize",
+    get: /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
+    function get() {
+      return this.pagingFontSize;
+    }
+  }, {
+    key: "pagingForwardLinkColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "pagingForwardLinkDisabledColor",
+    get: function get() {
+      return this.linkDisabledColor;
+    }
+    /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
+     * @see {@link pagingDotsPaddingSmall `pagingDotsPaddingSmall`} */
+  }, {
+    key: "pagingDotsDisabledColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "pagingPageLinkHintColor",
+    get: function get() {
+      return this.placeholderColor;
+    }
+    //#endregion Paging
+    //#region Hint
+  }, {
+    key: "hintColor",
+    get: function get() {
+      return this.textColorInvert;
+    }
+  }, {
+    key: "mobileHintColor",
+    get: function get() {
+      return this.hintColor;
+    }
+  }, {
+    key: "hintFontSize",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "hintLineHeight",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "toastFontSize",
+    get:
+    //#endregion Hint
+    //#region Toast
+    function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "toastLineHeight",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "dropdownMenuHoverBorderColor",
+    get: function get() {
+      return this.btnDefaultHoverBorderColor;
+    }
+  }, {
+    key: "dropdownMenuOffsetY",
+    get: function get() {
+      return this.menuOffsetY;
+    }
+  }, {
+    key: "dropdownMenuMenuOffsetY",
+    get: function get() {
+      return this.menuOffsetY;
+    }
+  }, {
+    key: "dropdownDefaultBg",
+    get: function get() {
+      return this.btnDefaultBg;
+    }
+  }, {
+    key: "dropdownBorderWidth",
+    get: function get() {
+      return this.btnBorderWidth;
+    }
+  }, {
+    key: "dropdownOutlineWidth",
+    get: function get() {
+      return this.btnOutlineWidth;
+    }
+  }, {
+    key: "dropdownLineHeightSmall",
+    get: function get() {
+      return this.btnLineHeightSmall;
+    }
+  }, {
+    key: "dropdownFontSizeSmall",
+    get: function get() {
+      return this.btnFontSizeSmall;
+    }
+  }, {
+    key: "dropdownPaddingXSmall",
+    get: function get() {
+      return this.btnPaddingXSmall;
+    }
+  }, {
+    key: "dropdownPaddingYSmall",
+    get: function get() {
+      return this.btnPaddingYSmall;
+    }
+  }, {
+    key: "dropdownIconSizeSmall",
+    get: function get() {
+      return this.btnIconSizeSmall;
+    }
+  }, {
+    key: "dropdownLineHeightMedium",
+    get: function get() {
+      return this.btnLineHeightMedium;
+    }
+  }, {
+    key: "dropdownFontSizeMedium",
+    get: function get() {
+      return this.btnFontSizeMedium;
+    }
+  }, {
+    key: "dropdownPaddingXMedium",
+    get: function get() {
+      return this.btnPaddingXMedium;
+    }
+  }, {
+    key: "dropdownPaddingYMedium",
+    get: function get() {
+      return this.btnPaddingYMedium;
+    }
+  }, {
+    key: "dropdownIconSizeMedium",
+    get: function get() {
+      return this.btnIconSizeMedium;
+    }
+  }, {
+    key: "dropdownLineHeightLarge",
+    get: function get() {
+      return this.btnLineHeightLarge;
+    }
+  }, {
+    key: "dropdownFontSizeLarge",
+    get: function get() {
+      return this.btnFontSizeLarge;
+    }
+  }, {
+    key: "dropdownPaddingXLarge",
+    get: function get() {
+      return this.btnPaddingXLarge;
+    }
+  }, {
+    key: "dropdownPaddingYLarge",
+    get: function get() {
+      return this.btnPaddingYLarge;
+    }
+  }, {
+    key: "dropdownIconSizeLarge",
+    get: function get() {
+      return this.btnIconSizeLarge;
+    }
+  }, {
+    key: "dropdownBgDisabled",
+    get: function get() {
+      return this.btnDisabledBg;
+    }
+  }, {
+    key: "dropdownBorderColorDisabled",
+    get: function get() {
+      return this.btnDisabledBorderColor;
+    }
+  }, {
+    key: "dropdownTextColorDisabled",
+    get: function get() {
+      return this.btnDisabledTextColor;
+    }
+    //#endregion Dropdown
+    //#region Menu
+  }, {
+    key: "menuBgDefault",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "menuItemTextColor",
+    get:
+    // menuItem
+    function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "menuItemPaddingForIconSmall",
+    get: function get() {
+      return parseInt(this.menuItemPaddingXSmall) + parseInt(this.menuItemIconWidthSmall) + parseInt(this.menuItemIconGap) + "px";
+    }
+  }, {
+    key: "menuItemPaddingForIconMedium",
+    get: function get() {
+      return parseInt(this.menuItemPaddingXMedium) + parseInt(this.menuItemIconWidthMedium) + parseInt(this.menuItemIconGap) + "px";
+    }
+  }, {
+    key: "menuItemPaddingForIconLarge",
+    get: function get() {
+      return parseInt(this.menuItemPaddingXLarge) + parseInt(this.menuItemIconWidthLarge) + parseInt(this.menuItemIconGap) + "px";
+    }
+  }, {
+    key: "menuItemLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "menuItemLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "menuItemLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "menuItemFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "menuItemFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "menuItemFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "menuItemHoverColor",
+    get: function get() {
+      return this.menuItemTextColor;
+    }
+    /**
+     * @deprecated
+     */
+  }, {
+    key: "menuItemLinkColor",
+    get: function get() {
+      return this.linkColor;
+    }
+  }, {
+    key: "menuItemCommentColor",
+    get: function get() {
+      return this.menuItemTextColor;
+    }
+  }, {
+    key: "menuItemCommentColorHover",
+    get: function get() {
+      return this.menuItemTextColor;
+    }
+  }, {
+    key: "menuItemLineHeightMobile",
+    get: function get() {
+      return this.lineHeightMobile;
+    }
+  }, {
+    key: "menuItemFontSizeMobile",
+    get: function get() {
+      return this.fontSizeMobile;
+    }
+  }, {
+    key: "menuItemDisabledColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "menuMessageTextColor",
+    get:
+    // menuMessage
+    function get() {
+      return this.menuItemDisabledColor;
+    }
+  }, {
+    key: "menuMessageBg",
+    get: function get() {
+      return this.menuItemDisabledBg;
+    }
+  }, {
+    key: "menuMessagePaddingY",
+    get: function get() {
+      return this.menuItemPaddingYSmall;
+    }
+  }, {
+    key: "menuMessagePaddingX",
+    get: function get() {
+      return this.menuItemPaddingXSmall;
+    }
+  }, {
+    key: "menuMessageDisplay",
+    get: function get() {
+      return this.menuItemDisplay;
+    }
+  }, {
+    key: "menuMessagePaddingMobile",
+    get: function get() {
+      return this.menuItemPaddingMobile;
+    }
+  }, {
+    key: "menuMessageLineHeightMobile",
+    get: function get() {
+      return this.menuItemLineHeightMobile;
+    }
+  }, {
+    key: "menuMessageFontSizeMobile",
+    get: function get() {
+      return this.menuItemFontSizeMobile;
+    }
+  }, {
+    key: "menuMessageFontSizeSmall",
+    get: function get() {
+      return this.menuItemFontSizeSmall;
+    }
+  }, {
+    key: "menuMessageFontSizeMedium",
+    get: function get() {
+      return this.menuItemFontSizeMedium;
+    }
+  }, {
+    key: "menuMessageFontSizeLarge",
+    get: function get() {
+      return this.menuItemFontSizeLarge;
+    }
+  }, {
+    key: "menuMessageLineHeightSmall",
+    get: function get() {
+      return this.menuItemLineHeightSmall;
+    }
+  }, {
+    key: "menuMessageLineHeightMedium",
+    get: function get() {
+      return this.menuItemLineHeightMedium;
+    }
+  }, {
+    key: "menuMessageLineHeightLarge",
+    get: function get() {
+      return this.menuItemLineHeightLarge;
+    }
+  }, {
+    key: "menuFooterColor",
+    get:
+    //menuFooter
+    function get() {
+      return this.menuHeaderColor;
+    }
+  }, {
+    key: "menuFooterLineHeightSmall",
+    get: function get() {
+      return this.menuHeaderLineHeightSmall;
+    }
+  }, {
+    key: "menuFooterLineHeightMedium",
+    get: function get() {
+      return this.menuHeaderLineHeightMedium;
+    }
+  }, {
+    key: "menuFooterLineHeightLarge",
+    get: function get() {
+      return this.menuHeaderLineHeightLarge;
+    }
+  }, {
+    key: "menuFooterFontSizeSmall",
+    get: function get() {
+      return this.menuHeaderFontSizeSmall;
+    }
+  }, {
+    key: "menuFooterFontSizeMedium",
+    get: function get() {
+      return this.menuHeaderFontSizeMedium;
+    }
+  }, {
+    key: "menuFooterFontSizeLarge",
+    get: function get() {
+      return this.menuHeaderFontSizeLarge;
+    }
+  }, {
+    key: "menuFooterPaddingXSmall",
+    get: function get() {
+      return this.menuHeaderPaddingXSmall;
+    }
+  }, {
+    key: "menuFooterPaddingXMedium",
+    get: function get() {
+      return this.menuHeaderPaddingXMedium;
+    }
+  }, {
+    key: "menuFooterPaddingXLarge",
+    get: function get() {
+      return this.menuHeaderPaddingXLarge;
+    }
+  }, {
+    key: "menuFooterPaddingTopSmall",
+    get: function get() {
+      return this.menuHeaderPaddingBottomSmall;
+    }
+  }, {
+    key: "menuFooterPaddingTopMedium",
+    get: function get() {
+      return this.menuHeaderPaddingBottomMedium;
+    }
+  }, {
+    key: "menuFooterPaddingTopLarge",
+    get: function get() {
+      return this.menuHeaderPaddingBottomLarge;
+    }
+  }, {
+    key: "menuFooterPaddingBottomSmall",
+    get: function get() {
+      return this.menuHeaderPaddingTopSmall;
+    }
+  }, {
+    key: "menuFooterPaddingBottomMedium",
+    get: function get() {
+      return this.menuHeaderPaddingTopMedium;
+    }
+  }, {
+    key: "menuFooterPaddingBottomLarge",
+    get: function get() {
+      return this.menuHeaderPaddingTopLarge;
+    }
+
+    //menuSeparator
+  }, {
+    key: "toggleLineHeightSmall",
+    get:
+    //#endregion Menu
+    //#region Toggle
+    function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "toggleLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "toggleLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "toggleFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "toggleFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "toggleFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "toggleTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "toggleHandleBorderRadiusSmall",
+    get: function get() {
+      var height = parseInt(this.toggleHeightSmall, 10) || 0;
+      var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      var handleSize = height - 2 * borderWidth;
+      return handleSize / 2 + "px";
+    }
+  }, {
+    key: "toggleHandleBorderRadiusMedium",
+    get: function get() {
+      var height = parseInt(this.toggleHeightMedium, 10) || 0;
+      var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      var handleSize = height - 2 * borderWidth;
+      return handleSize / 2 + "px";
+    }
+  }, {
+    key: "toggleHandleBorderRadiusLarge",
+    get: function get() {
+      var height = parseInt(this.toggleHeightLarge, 10) || 0;
+      var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      var handleSize = height - 2 * borderWidth;
+      return handleSize / 2 + "px";
+    }
+  }, {
+    key: "toggleBorderRadiusSmall",
+    get: function get() {
+      return "calc(" + this.toggleHeightSmall + " * 0.5)";
+    }
+  }, {
+    key: "toggleBorderRadiusMedium",
+    get: function get() {
+      return "calc(" + this.toggleHeightMedium + " * 0.5)";
+    }
+  }, {
+    key: "toggleBorderRadiusLarge",
+    get: function get() {
+      return "calc(" + this.toggleHeightLarge + " * 0.5)";
+    }
+  }, {
+    key: "toggleBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "toggleOutlineWidth",
+    get: function get() {
+      var outlineWidth = parseInt(this.controlOutlineWidth, 10) || 0;
+      var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      return outlineWidth + borderWidth + "px";
+    }
+  }, {
+    key: "toggleBorderColorDisabled",
+    get: function get() {
+      return this.toggleBorderColor;
+    }
+  }, {
+    key: "toggleShadowColorError",
+    get: function get() {
+      return this.errorMain;
+    }
+  }, {
+    key: "toggleShadowColorWarning",
+    get: function get() {
+      return this.warningMain;
+    }
+  }, {
+    key: "toggleFocusShadowColor",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "toggleOutlineColorFocus",
+    get: function get() {
+      return this.outlineColorFocus;
+    }
+  }, {
+    key: "toggleContainerBgHover",
+    get: function get() {
+      return this.toggleBgHover;
+    }
+
+    // checked
+  }, {
+    key: "toggleContainerBgChecked",
+    get: function get() {
+      return this.toggleBgChecked;
+    }
+  }, {
+    key: "toggleBgDisabled",
+    get: function get() {
+      return this.bgDisabled;
+    }
+
+    // disabled checked
+  }, {
+    key: "toggleBorderColorDisabledChecked",
+    get: function get() {
+      return this.toggleBorderColor;
+    }
+  }, {
+    key: "popupTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "popupBackground",
+    get: function get() {
+      return this.bgSecondary;
+    }
+  }, {
+    key: "inputTextColor",
+    get:
+    //#endregion
+    //#region Input
+    function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "inputIconColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "inputFocusedIconColor",
+    get: function get() {
+      return this.inputIconColor;
+    }
+  }, {
+    key: "inputTextColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "inputPlaceholderColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "inputFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "inputFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "inputFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "inputLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "inputLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "inputLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "inputHeightSmall",
+    get: function get() {
+      var borderWidth = parseInt(this.inputBorderWidth, 10) || 0;
+      var padding = parseInt(this.inputPaddingYSmall, 10) || 0;
+      var lineHeigh = parseInt(this.inputLineHeightSmall, 10) || 0;
+      return 2 * borderWidth + 2 * padding + lineHeigh + "px";
+    }
+  }, {
+    key: "inputHeightMedium",
+    get: function get() {
+      var borderWidth = parseInt(this.inputBorderWidth, 10) || 0;
+      var padding = parseInt(this.inputPaddingYMedium, 10) || 0;
+      var lineHeigh = parseInt(this.inputLineHeightMedium, 10) || 0;
+      return 2 * borderWidth + 2 * padding + lineHeigh + "px";
+    }
+  }, {
+    key: "inputHeightLarge",
+    get: function get() {
+      var borderWidth = parseInt(this.inputBorderWidth, 10) || 0;
+      var padding = parseInt(this.inputPaddingYLarge, 10) || 0;
+      var lineHeigh = parseInt(this.inputLineHeightLarge, 10) || 0;
+      return 2 * borderWidth + 2 * padding + lineHeigh + "px";
+    }
+  }, {
+    key: "inputPaddingYSmall",
+    get: function get() {
+      return this.controlPaddingYSmall;
+    }
+  }, {
+    key: "inputPaddingYMedium",
+    get: function get() {
+      return this.controlPaddingYMedium;
+    }
+  }, {
+    key: "inputPaddingYLarge",
+    get: function get() {
+      return this.controlPaddingYLarge;
+    }
+  }, {
+    key: "inputFocusShadow",
+    get: function get() {
+      return "0 0 0 " + this.inputOutlineWidth + " " + this.borderColorFocus;
+    }
+  }, {
+    key: "inputFocusedBg",
+    get: function get() {
+      return this.inputBg;
+    }
+  }, {
+    key: "inputDisabledBg",
+    get: function get() {
+      return this.bgDisabled;
+    }
+  }, {
+    key: "inputDisabledBorderColor",
+    get: function get() {
+      return this.borderColorDisabled;
+    }
+  }, {
+    key: "inputFocusOutline",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "inputBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "inputOutlineWidth",
+    get: function get() {
+      return "calc(" + this.controlOutlineWidth + " - 1px)";
+    }
+  }, {
+    key: "inputBorderColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "inputBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "inputBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "inputBorderTopColor",
+    get: function get() {
+      return this.inputBorderColor;
+    }
+  }, {
+    key: "inputPlaceholderColor",
+    get: function get() {
+      return this.placeholderColor;
+    }
+  }, {
+    key: "inputPlaceholderColorLight",
+    get: function get() {
+      return this.placeholderColorLight;
+    }
+  }, {
+    key: "checkboxFontSizeSmall",
+    get:
+    //#endregion Input
+    //#region Checkbox
+    function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "checkboxFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "checkboxFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "checkboxLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "checkboxLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "checkboxLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "checkboxPaddingYSmall",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightSmall, 10) || 0;
+      var lineHeight = parseInt(this.checkboxLineHeightSmall, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "checkboxPaddingYMedium",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightMedium, 10) || 0;
+      var lineHeight = parseInt(this.checkboxLineHeightMedium, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "checkboxPaddingYLarge",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightLarge, 10) || 0;
+      var lineHeight = parseInt(this.checkboxLineHeightLarge, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "checkboxTextColorDefault",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "checkboxTextColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "checkboxShadowDisabled",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " rgba(0, 0, 0, 0.1)";
+    }
+  }, {
+    key: "checkboxBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "checkboxShadow",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " rgba(0, 0, 0, 0.15)";
+    }
+  }, {
+    key: "checkboxShadowHover",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " #c3c3c3";
+    }
+  }, {
+    key: "checkboxOutlineColorFocus",
+    get: function get() {
+      return this.outlineColorFocus;
+    }
+  }, {
+    key: "checkboxBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "checkboxBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "checkboxCheckedHoverShadow",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " " + this.checkboxCheckedHoverBg;
+    }
+  }, {
+    key: "checkboxOutlineWidth",
+    get: function get() {
+      return this.controlOutlineWidth;
+    }
+  }, {
+    key: "checkboxCheckedShadow",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " " + this.checkboxCheckedBg;
+    }
+  }, {
+    key: "checkboxCheckedActiveShadow",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " " + this.checkboxCheckedActiveBg;
+    }
+  }, {
+    key: "checkboxBorderColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "checkboxHoverBg",
+    get: function get() {
+      return this.btnDefaultHoverBg;
+    }
+  }, {
+    key: "checkboxActiveBg",
+    get: function get() {
+      return this.btnDefaultActiveBg;
+    }
+  }, {
+    key: "checkboxCheckedBg",
+    get: function get() {
+      return this.bgChecked;
+    }
+  }, {
+    key: "checkboxBgDisabled",
+    get: function get() {
+      return this.bgDisabled;
+    }
+  }, {
+    key: "checkboxCheckedActiveBg",
+    get: function get() {
+      return ColorFunctions.darken(this.checkboxCheckedBg, '15%');
+    }
+  }, {
+    key: "checkboxShadowActive",
+    get: function get() {
+      return "0 0 0 " + this.checkboxBorderWidth + " #c3c3c3";
+    }
+    //#endregion Checkbox
+    //#region TextArea
+  }, {
+    key: "textareaColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "textareaTextColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "textareaPlaceholderColorLight",
+    get: function get() {
+      return this.placeholderColorLight;
+    }
+  }, {
+    key: "textareaPlaceholderColor",
+    get: function get() {
+      return this.placeholderColor;
+    }
+  }, {
+    key: "textareaPlaceholderColorDisabled",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "textareaFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "textareaFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "textareaFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "textareaLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "textareaLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "textareaLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "textareaBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "textareaOutlineWidth",
+    get: function get() {
+      var outlineWidth = parseInt(this.controlOutlineWidth, 10) || 0;
+      var borderWidth = parseInt(this.textareaBorderWidth, 10) || 0;
+      return outlineWidth - borderWidth + "px";
+    }
+  }, {
+    key: "textareaMinHeightSmall",
+    get: function get() {
+      var lineHeight = parseInt(this.textareaLineHeightSmall, 10) || 0;
+      var paddingY = parseInt(this.textareaPaddingYSmall, 10) || 0;
+      var borderWidth = parseInt(this.textareaBorderWidth, 10) || 0;
+      return lineHeight + paddingY * 2 + borderWidth * 2 + "px";
+    }
+  }, {
+    key: "textareaMinHeightMedium",
+    get: function get() {
+      var lineHeight = parseInt(this.textareaLineHeightMedium, 10) || 0;
+      var paddingY = parseInt(this.textareaPaddingYMedium, 10) || 0;
+      var borderWidth = parseInt(this.textareaBorderWidth, 10) || 0;
+      return lineHeight + paddingY * 2 + borderWidth * 2 + "px";
+    }
+  }, {
+    key: "textareaMinHeightLarge",
+    get: function get() {
+      var lineHeight = parseInt(this.textareaLineHeightLarge, 10) || 0;
+      var paddingY = parseInt(this.textareaPaddingYLarge, 10) || 0;
+      var borderWidth = parseInt(this.textareaBorderWidth, 10) || 0;
+      return lineHeight + paddingY * 2 + borderWidth * 2 + "px";
+    }
+  }, {
+    key: "textareaPaddingYSmall",
+    get: function get() {
+      return this.controlPaddingYSmall;
+    }
+  }, {
+    key: "textareaPaddingYMedium",
+    get: function get() {
+      return this.controlPaddingYMedium;
+    }
+  }, {
+    key: "textareaPaddingYLarge",
+    get: function get() {
+      return this.controlPaddingYLarge;
+    }
+  }, {
+    key: "textareaBorderColor",
+    get: function get() {
+      return this.borderColorGrayLight;
+    }
+  }, {
+    key: "textareaBorderColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "textareaBorderColorHover",
+    get: function get() {
+      return this.inputBorderColorHover;
+    }
+  }, {
+    key: "textareaBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "textareaBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "textareaDisabledBg",
+    get: function get() {
+      return this.inputDisabledBg;
+    }
+  }, {
+    key: "textareaDisabledBorderColor",
+    get: function get() {
+      return this.borderColorDisabled;
+    }
+  }, {
+    key: "textareaCounterColor",
+    get: function get() {
+      return this.gray;
+    }
+  }, {
+    key: "textareaCounterBg",
+    get: function get() {
+      return ColorFunctions.fade(this.textareaBg, 0.9);
+    }
+  }, {
+    key: "textareaCounterErrorColor",
+    get: function get() {
+      return this.errorText;
+    }
+  }, {
+    key: "textareaCounterHelpIconColor",
+    get: function get() {
+      return this.linkColor;
+    }
+
+    //#endregion Textarea
+    //#region Radio
+  }, {
+    key: "radioOutlineWidth",
+    get: function get() {
+      return this.controlOutlineWidth;
+    }
+  }, {
+    key: "radioTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "radioFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "radioFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "radioFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "radioLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "radioLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "radioLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "radioPaddingYSmall",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightSmall, 10) || 0;
+      var lineHeight = parseInt(this.radioLineHeightSmall, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "radioPaddingYMedium",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightMedium, 10) || 0;
+      var lineHeight = parseInt(this.radioLineHeightMedium, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "radioPaddingYLarge",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightLarge, 10) || 0;
+      var lineHeight = parseInt(this.radioLineHeightLarge, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "radioHoverBg",
+    get: function get() {
+      return this.checkboxHoverBg;
+    }
+  }, {
+    key: "radioActiveBg",
+    get: function get() {
+      return this.checkboxActiveBg;
+    }
+  }, {
+    key: "radioBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "radioBorderColor",
+    get: function get() {
+      return this.borderColorGrayLight;
+    }
+  }, {
+    key: "radioBorder",
+    get: function get() {
+      return this.radioBorderWidth + " solid " + this.radioBorderColor;
+    }
+  }, {
+    key: "radioBorderColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "radioBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "radioBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "radioFocusShadow",
+    get: function get() {
+      return "inset 0 0 0 1px " + this.outlineColorFocus;
+    }
+  }, {
+    key: "radioCheckedBgColor",
+    get: function get() {
+      return this.checkboxCheckedBg;
+    }
+  }, {
+    key: "radioCheckedHoverBgColor",
+    get: function get() {
+      return ColorFunctions.darken(this.checkboxCheckedBg, '5%');
+    }
+  }, {
+    key: "radioDisabledShadow",
+    get: function get() {
+      return "0 0 0 " + this.radioBorderWidth + " rgba(0, 0, 0, 0.1)";
+    }
+  }, {
+    key: "radioCheckedDisabledBulletBg",
+    get: function get() {
+      return this.gray;
+    }
+    //#endregion
+    //#region Tabs
+  }, {
+    key: "tabFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "tabFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "tabFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "tabLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "tabLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "tabLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "tabPaddingYSmall",
+    get: function get() {
+      var paddingY = parseInt(this.controlPaddingYSmall);
+      var borderWidth = parseInt(this.controlBorderWidth);
+      return paddingY + borderWidth + "px";
+    }
+  }, {
+    key: "tabPaddingYMedium",
+    get: function get() {
+      var paddingY = parseInt(this.controlPaddingYMedium);
+      var borderWidth = parseInt(this.controlBorderWidth);
+      return paddingY + borderWidth + "px";
+    }
+  }, {
+    key: "tabPaddingYLarge",
+    get: function get() {
+      var paddingY = parseInt(this.controlPaddingYLarge);
+      var borderWidth = parseInt(this.controlBorderWidth);
+      return paddingY + borderWidth + "px";
+    }
+  }, {
+    key: "tabOutlineWidth",
+    get: function get() {
+      return this.controlOutlineWidth;
+    }
+  }, {
+    key: "tabTextColorDefault",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "tabColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "tabColorError",
+    get: function get() {
+      return this.btnDangerBg;
+    }
+  }, {
+    key: "tabColorWarning",
+    get: function get() {
+      return this.btnPayBg;
+    }
+  }, {
+    key: "tabColorSuccess",
+    get: function get() {
+      return this.btnSuccessBg;
+    }
+  }, {
+    key: "tabColorPrimary",
+    get: function get() {
+      return this.btnPrimaryBg;
+    }
+  }, {
+    key: "tabColorHoverError",
+    get: function get() {
+      return ColorFunctions.lighten(this.tabColorError, '25%');
+    }
+  }, {
+    key: "tabColorHoverWarning",
+    get: function get() {
+      return ColorFunctions.lighten(this.tabColorWarning, '25%');
+    }
+  }, {
+    key: "tabColorHoverSuccess",
+    get: function get() {
+      return ColorFunctions.lighten(this.tabColorSuccess, '25%');
+    }
+  }, {
+    key: "tabColorHoverPrimary",
+    get: function get() {
+      return ColorFunctions.lighten(this.tabColorPrimary, '25%');
+    }
+  }, {
+    key: "spinnerBgColor",
+    get:
+    //#endregion Tabs
+    //#region Spinner
+    function get() {
+      return this.grayXLight;
+    }
+  }, {
+    key: "spinnerColor",
+    get: function get() {
+      return this.red;
+    }
+  }, {
+    key: "spinnerDimmedColor",
+    get: function get() {
+      return this.gray;
+    }
+  }, {
+    key: "spinnerCaptionColor",
+    get: function get() {
+      return this.gray;
+    }
+  }, {
+    key: "spinnerFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "spinnerFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "spinnerFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "spinnerLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "spinnerLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "spinnerLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "switcherTextColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "switcherOutlineWidth",
+    get: function get() {
+      return this.btnOutlineWidth;
+    }
+  }, {
+    key: "switcherCaptionFontSizeSmall",
+    get: function get() {
+      return this.btnFontSizeSmall;
+    }
+  }, {
+    key: "switcherCaptionFontSizeMedium",
+    get: function get() {
+      return this.btnFontSizeMedium;
+    }
+  }, {
+    key: "switcherCaptionFontSizeLarge",
+    get: function get() {
+      return this.btnFontSizeLarge;
+    }
+  }, {
+    key: "switcherCaptionLineHeightSmall",
+    get: function get() {
+      return this.btnLineHeightSmall;
+    }
+  }, {
+    key: "switcherCaptionLineHeightMedium",
+    get: function get() {
+      return this.btnLineHeightMedium;
+    }
+  }, {
+    key: "switcherCaptionLineHeightLarge",
+    get: function get() {
+      return this.btnLineHeightLarge;
+    }
+  }, {
+    key: "switcherCaptionGapSmall",
+    get: function get() {
+      return this.btnPaddingXSmall;
+    }
+  }, {
+    key: "switcherCaptionGapMedium",
+    get: function get() {
+      return this.btnPaddingXMedium;
+    }
+  }, {
+    key: "switcherCaptionGapLarge",
+    get: function get() {
+      return this.btnPaddingXLarge;
+    }
+  }, {
+    key: "switcherButtonPaddingYSmall",
+    get: function get() {
+      return this.btnPaddingYSmall;
+    }
+  }, {
+    key: "switcherButtonPaddingYMedium",
+    get: function get() {
+      return this.btnPaddingYMedium;
+    }
+  }, {
+    key: "switcherButtonPaddingYLarge",
+    get: function get() {
+      return this.btnPaddingYLarge;
+    }
+  }, {
+    key: "switcherButtonLineHeightSmall",
+    get: function get() {
+      return this.btnLineHeightSmall;
+    }
+  }, {
+    key: "switcherButtonLineHeightMedium",
+    get: function get() {
+      return this.btnLineHeightMedium;
+    }
+  }, {
+    key: "switcherButtonLineHeightLarge",
+    get: function get() {
+      return this.btnLineHeightLarge;
+    }
+  }, {
+    key: "switcherButtonFontSizeSmall",
+    get: function get() {
+      return this.btnFontSizeSmall;
+    }
+  }, {
+    key: "switcherButtonFontSizeMedium",
+    get: function get() {
+      return this.btnFontSizeMedium;
+    }
+  }, {
+    key: "switcherButtonFontSizeLarge",
+    get: function get() {
+      return this.btnFontSizeLarge;
+    }
+  }, {
+    key: "switcherButtonBorderRadiusSmall",
+    get: function get() {
+      return this.btnBorderRadiusSmall;
+    }
+  }, {
+    key: "switcherButtonBorderRadiusMedium",
+    get: function get() {
+      return this.btnBorderRadiusMedium;
+    }
+  }, {
+    key: "switcherButtonBorderRadiusLarge",
+    get: function get() {
+      return this.btnBorderRadiusLarge;
+    }
+  }, {
+    key: "switcherButtonBorderWidth",
+    get: function get() {
+      return this.btnBorderWidth;
+    }
+  }, {
+    key: "switcherButtonDisabledBorderColor",
+    get: function get() {
+      return this.switcherBtnDisabledBorderColor;
+    }
+  }, {
+    key: "switcherButtonCheckedDisabledShadow",
+    get: function get() {
+      return this.btnCheckedDisabledShadow;
+    }
+    //#endregion
+    //#region MobilePopup
+  }, {
+    key: "mobilePopupHeaderFontSize",
+    get: function get() {
+      return this.fontSizeMobile;
+    }
+  }, {
+    key: "mobilePopupHeaderLineHeight",
+    get: function get() {
+      return this.lineHeightMobile;
+    }
+  }, {
+    key: "globalLoaderColor",
+    get:
+    //#endregion
+    //#region GlobalLoader
+    function get() {
+      return this.blueLight;
+    }
+  }, {
+    key: "fileUploaderPaddingXSmall",
+    get: function get() {
+      return this.inputPaddingXSmall;
+    }
+  }, {
+    key: "fileUploaderPaddingXMedium",
+    get: function get() {
+      return this.inputPaddingXMedium;
+    }
+  }, {
+    key: "fileUploaderPaddingXLarge",
+    get: function get() {
+      return this.inputPaddingXLarge;
+    }
+  }, {
+    key: "fileUploaderFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "fileUploaderFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "fileUploaderFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+  }, {
+    key: "fileUploaderLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "fileUploaderLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "fileUploaderLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "fileUploaderPaddingYSmall",
+    get: function get() {
+      return this.controlPaddingYSmall;
+    }
+  }, {
+    key: "fileUploaderPaddingYMedium",
+    get: function get() {
+      return this.controlPaddingYMedium;
+    }
+  }, {
+    key: "fileUploaderPaddingYLarge",
+    get: function get() {
+      return this.controlPaddingYLarge;
+    }
+  }, {
+    key: "fileUploaderTextColorDefault",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "fileUploaderBorderWidth",
+    get: function get() {
+      return this.controlBorderWidth;
+    }
+  }, {
+    key: "fileUploaderDisabledBorder",
+    get: function get() {
+      return this.fileUploaderBorderWidth + " " + this.fileUploaderBorderStyle + " " + this.fileUploaderDisabledBorderColor;
+    }
+  }, {
+    key: "fileUploaderBorderColorFocus",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "fileUploaderLinkColor",
+    get: function get() {
+      return this.textColorDefault;
+    }
+  }, {
+    key: "fileUploaderBorderColorError",
+    get: function get() {
+      return this.borderColorError;
+    }
+  }, {
+    key: "fileUploaderBorderColorWarning",
+    get: function get() {
+      return this.borderColorWarning;
+    }
+  }, {
+    key: "fileUploaderDisabledBg",
+    get: function get() {
+      return this.btnDisabledBg;
+    }
+  }, {
+    key: "fileUploaderDisabledTextColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "fileUploaderDisabledLinkColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "fileUploaderDisabledIconColor",
+    get: function get() {
+      return this.textColorDisabled;
+    }
+  }, {
+    key: "fileUploaderDragOverBorderColor",
+    get: function get() {
+      return this.borderColorFocus;
+    }
+  }, {
+    key: "clearCrossIconWidthSmall",
+    get:
+    //#endregion FileUploader
+
+    //#region ClearCrossIcon
+    function get() {
+      return this.inputHeightSmall;
+    }
+  }, {
+    key: "clearCrossIconWidthMedium",
+    get: function get() {
+      return this.inputHeightMedium;
+    }
+  }, {
+    key: "clearCrossIconWidthLarge",
+    get: function get() {
+      return this.inputHeightLarge;
+    }
+  }, {
+    key: "clearCrossIconHeightSmall",
+    get: function get() {
+      return this.inputHeightSmall;
+    }
+  }, {
+    key: "clearCrossIconHeightMedium",
+    get: function get() {
+      return this.inputHeightMedium;
+    }
+  }, {
+    key: "clearCrossIconHeightLarge",
+    get: function get() {
+      return this.inputHeightLarge;
+    }
+  }, {
+    key: "clearCrossIconRightMarginSmall",
+    get: function get() {
+      var inputPaddingXSmall = parseInt(this.inputPaddingXSmall);
+      var inputBorderWidth = parseInt(this.inputBorderWidth);
+      return "-" + (inputPaddingXSmall + inputBorderWidth) + "px";
+    }
+  }, {
+    key: "clearCrossIconRightMarginMedium",
+    get: function get() {
+      var inputPaddingXMedium = parseInt(this.inputPaddingXMedium);
+      var inputBorderWidth = parseInt(this.inputBorderWidth);
+      return "-" + (inputPaddingXMedium + inputBorderWidth) + "px";
+    }
+  }, {
+    key: "clearCrossIconRightMarginLarge",
+    get: function get() {
+      var inputPaddingXLarge = parseInt(this.inputPaddingXLarge);
+      var inputBorderWidth = parseInt(this.inputBorderWidth);
+      return "-" + (inputPaddingXLarge + inputBorderWidth) + "px";
+    }
+  }, {
+    key: "clearCrossIconBorderRadiusSmall",
+    get: function get() {
+      return this.inputBorderRadiusSmall;
+    }
+  }, {
+    key: "clearCrossIconBorderRadiusMedium",
+    get: function get() {
+      return this.inputBorderRadiusMedium;
+    }
+  }, {
+    key: "clearCrossIconBorderRadiusLarge",
+    get: function get() {
+      return this.inputBorderRadiusLarge;
+    }
+  }, {
+    key: "closeBtnIconFocusShadow",
+    get: function get() {
+      return "inset 0 0 0 1px " + this.borderColorFocus + ", inset 0 0 0 2px " + this.outlineColorFocus;
+    }
+    //#endregion CloseIcon
+
+    //#region Autocomplete
+  }, {
+    key: "autocompleteMenuOffsetY",
+    get: function get() {
+      return this.menuOffsetY;
+    }
+    //#endregion Autocomplete
+
+    //#region Combobox
+  }, {
+    key: "comboboxMenuOffsetY",
+    get: function get() {
+      return this.menuOffsetY;
+    }
+    //#endregion Combobox
+
+    //#region MiniModal
+  }, {
+    key: "validationsTextColorError",
+    get:
+    //#endregion MiniModal
+
+    //#region react-ui-validations
+    function get() {
+      return this.errorText;
+    }
+
+    //#endregion
+  }]);
+}();
+_BasicThemeClass = BasicThemeClass; //#region Common variables
+BasicThemeClass.baseFontFamily = '"Lab Grotesque", "Lab Grotesque K", Arial, sans-serif';
+BasicThemeClass.labGrotesqueBaselineCompensation = '1';
+BasicThemeClass.brand = '#2291ff';
+BasicThemeClass.white = '#fff';
+BasicThemeClass.grayXLight = '#ebebeb';
+BasicThemeClass.gray = '#858585';
+BasicThemeClass.grayDark = '#333';
+BasicThemeClass.black = '#000';
+BasicThemeClass.blueXxLight = '#cdedff';
+BasicThemeClass.blueLight = '#1f87ef';
+BasicThemeClass.blue = '#1874cf';
+BasicThemeClass.greenXxLight = '#C7F9CC';
+BasicThemeClass.green = '#1C8A3F';
+BasicThemeClass.greenDark = '#197F39';
+BasicThemeClass.red = '#FE4C4C';
+BasicThemeClass.redXxLight = '#FFEBEB';
+BasicThemeClass.redDark = '#CC2626';
+BasicThemeClass.yellowXxLight = '#ffeec2';
+BasicThemeClass.yellow = '#fcb73e';
+BasicThemeClass.yellowDark = '#ef8b17';
+BasicThemeClass.bgDefault = '#fff';
+BasicThemeClass.bgDisabled = '#F0F0F0';
+BasicThemeClass.warningMain = '#fcb73e';
+BasicThemeClass.warningSecondary = '#fff0bc';
+BasicThemeClass.warningText = '#d97e00';
+BasicThemeClass.borderColorFocusLight = '#cdedff';
+BasicThemeClass.borderColorGrayDark = 'rgba(0, 0, 0, 0.28)';
+BasicThemeClass.borderColorGrayLight = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.borderColorDisabled = 'rgba(0, 0, 0, 0.10)';
+BasicThemeClass.placeholderColor = '#adadad';
+BasicThemeClass.outlineColorFocus = '#fff';
+BasicThemeClass.placeholderColorLight = '#cdcdcd';
+BasicThemeClass.blinkColor = 'rgba(0, 136, 255, 0.2)';
+BasicThemeClass.controlBorderWidth = '1px';
+BasicThemeClass.controlOutlineWidth = '2px';
+BasicThemeClass.controlLineHeightSmall = '20px';
+BasicThemeClass.controlLineHeightMedium = '22px';
+BasicThemeClass.controlLineHeightLarge = '24px';
+BasicThemeClass.controlPaddingYSmall = '5px';
+BasicThemeClass.controlPaddingYMedium = '8px';
+BasicThemeClass.controlPaddingYLarge = '11px';
+BasicThemeClass.textColorDefault = '#222222';
+BasicThemeClass.textColorInvert = '#fff';
+BasicThemeClass.textColorDisabled = '#adadad';
+BasicThemeClass.textColorDisabledContrast = '#858585';
+BasicThemeClass.fontSizeSmall = '14px';
+BasicThemeClass.fontSizeMedium = '16px';
+BasicThemeClass.fontSizeLarge = '18px';
+BasicThemeClass.fontSizeMobile = '18px';
+BasicThemeClass.lineHeightMobile = '24px';
+BasicThemeClass.specificityLevel = '0';
+BasicThemeClass.fixedPanelShadow = 'none';
+BasicThemeClass.bgActive = '#141414';
+BasicThemeClass.bgChecked = '#3D3D3D';
+BasicThemeClass.borderColorFocus = '#3D3D3D';
+BasicThemeClass.controlHeightSmall = '32px';
+BasicThemeClass.controlHeightMedium = '40px';
+BasicThemeClass.controlHeightLarge = '48px';
+BasicThemeClass.mobileMediaQuery = '(max-width: 576px) and (pointer: coarse)';
+BasicThemeClass.transitionDuration = '100ms';
+BasicThemeClass.transitionTimingFunction = 'cubic-bezier(0.5, 1, 0.89, 1)'; //#endregion Common variables
+//#region Link
+BasicThemeClass.linkColor = '#222222';
+BasicThemeClass.linkTextDecoration = 'underline';
+BasicThemeClass.linkActiveColor = '#141414';
+BasicThemeClass.linkHoverTextDecoration = 'none';
+BasicThemeClass.linkSuccessActiveColor = '#167333';
+BasicThemeClass.linkDangerHoverColor = '#BB1919';
+BasicThemeClass.linkDangerActiveColor = '#AB0D0D';
+BasicThemeClass.linkIconMarginRight = '4px';
+BasicThemeClass.linkIconMarginLeft = '4px';
+BasicThemeClass.linkGrayedColor = '#858585';
+BasicThemeClass.linkGrayedHoverColor = '#292929';
+BasicThemeClass.linkGrayedActiveColor = '#141414';
+BasicThemeClass.linkButtonLineHeight = '34px';
+BasicThemeClass.linkButtonPaddingX = '10px';
+BasicThemeClass.linkTextDecorationStyle = 'solid';
+BasicThemeClass.linkTextDecorationThickness = '1px';
+BasicThemeClass.linkTextUnderlineOffset = '4px';
+BasicThemeClass.linkTextUnderlineOpacity = '0.5';
+BasicThemeClass.linkTextDecorationColor = "color-mix(in srgb, currentColor " + parseFloat(_BasicThemeClass.linkTextUnderlineOpacity) * 100 + "%, transparent)";
+BasicThemeClass.linkLineBorderBottomStyle = 'solid';
+BasicThemeClass.linkLineBorderBottomWidth = '1px';
+BasicThemeClass.linkLineBorderBottomOpacity = '0.5';
+BasicThemeClass.linkLineBorderBottomColor = "color-mix(in srgb, currentColor " + parseFloat(_BasicThemeClass.linkLineBorderBottomOpacity) * 100 + "%, transparent)";
+BasicThemeClass.linkFocusOutlineColor = '#3D3D3D';
+BasicThemeClass.tokenDisabledBg = 'rgba(0, 0, 0, 0.05)';
+BasicThemeClass.tokenMarginYSmall = '2px';
+BasicThemeClass.tokenMarginXSmall = '1px';
+BasicThemeClass.tokenMarginYMedium = '2px';
+BasicThemeClass.tokenMarginXMedium = '2px';
+BasicThemeClass.tokenMarginYLarge = '2px';
+BasicThemeClass.tokenMarginXLarge = '3px';
+BasicThemeClass.tokenPaddingYSmall = '1px';
+BasicThemeClass.tokenPaddingXSmall = '3px';
+BasicThemeClass.tokenPaddingYMedium = '2px';
+BasicThemeClass.tokenPaddingXMedium = '5px';
+BasicThemeClass.tokenPaddingYLarge = '3px';
+BasicThemeClass.tokenPaddingXLarge = '7px';
+BasicThemeClass.tokenMarginBeforeIcon = '4px';
+BasicThemeClass.tokenRemoveIconSize = '16px';
+BasicThemeClass.tokenRemoveIconPaddingY = '0px';
+BasicThemeClass.tokenRemoveIconPaddingX = '0px';
+BasicThemeClass.tokenRemoveIconGap = '4px';
+BasicThemeClass.tokenRemoveIconBoxSizing = 'content-box';
+BasicThemeClass.tokenBorderRadius = '2px';
+BasicThemeClass.tokenBorderWidth = '1px';
+BasicThemeClass.tokenBorderColorDisabled = 'transparent';
+BasicThemeClass.tokenOutlineWidth = '1px';
+BasicThemeClass.tokenShadowDisabled = '';
+BasicThemeClass.tokenBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.tokenColor = '#222222';
+BasicThemeClass.tokenBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.tokenBgHover = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.tokenColorHover = '#222222';
+BasicThemeClass.tokenBorderColorHover = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.tokenBgActive = '#3D3D3D';
+BasicThemeClass.tokenColorActive = '#FFFFFF';
+BasicThemeClass.tokenBorderColorActive = 'transparent';
+BasicThemeClass.tokenInputBorderRadius = '2px';
+BasicThemeClass.tokenInputMenuPopupBg = 'transparent';
+BasicThemeClass.tokenInputPaddingYSmall = '1px';
+BasicThemeClass.tokenInputPaddingXSmall = '2px';
+BasicThemeClass.tokenInputPaddingYMedium = '3px';
+BasicThemeClass.tokenInputPaddingXMedium = '3px';
+BasicThemeClass.tokenInputPaddingYLarge = '5px';
+BasicThemeClass.tokenInputPaddingXLarge = '4px';
+BasicThemeClass.tokenInputPopupOffset = '2px';
+BasicThemeClass.tokenInputPopupMarginSmall = '7px';
+BasicThemeClass.tokenInputPopupMarginMedium = '10px';
+BasicThemeClass.tokenInputPopupMarginLarge = '13px'; //#endregion TokenInput
+//#region Loader
+BasicThemeClass.loaderBg = 'rgba(255, 255, 255, 0.8)';
+BasicThemeClass.loaderOpacity = '0.8';
+BasicThemeClass.loaderBorderRadius = '0px'; //#endregion
+//#region Button
+BasicThemeClass.btnBackgroundClip = 'padding-box';
+BasicThemeClass.btnLinkBorderRadius = '2px';
+BasicThemeClass.btnFocusShadowWidth = '2px';
+BasicThemeClass.btnBorderColorTransition = '';
+BasicThemeClass.btnDisabledBorderColor = 'rgba(0, 0, 0, 0.10)';
+BasicThemeClass.btnCheckedBg = '#3D3D3D';
+BasicThemeClass.btnCheckedDisabledBg = '#ADADAD';
+BasicThemeClass.btnCheckedDisabledColor = '#E6E6E6';
+BasicThemeClass.btnCheckedTextColor = '#fff';
+BasicThemeClass.btnCheckedShadow = 'none';
+BasicThemeClass.btnCheckedDisabledShadow = 'none';
+BasicThemeClass.btnBorderRadiusSmall = '8px';
+BasicThemeClass.btnBorderRadiusMedium = '8px';
+BasicThemeClass.btnBorderRadiusLarge = '8px';
+BasicThemeClass.btnInsetWidth = '1px';
+BasicThemeClass.btnPaddingXSmall = '12px';
+BasicThemeClass.btnPaddingXMedium = '16px';
+BasicThemeClass.btnPaddingXLarge = '20px';
+BasicThemeClass.btnIconGapSmallLeft = '4px';
+BasicThemeClass.btnIconGapMediumLeft = '6px';
+BasicThemeClass.btnIconGapLargeLeft = '8px';
+BasicThemeClass.btnIconSizeSmall = '16px';
+BasicThemeClass.btnIconSizeMedium = '20px';
+BasicThemeClass.btnIconSizeLarge = '24px';
+BasicThemeClass.btnDefaultBg = '#fff';
+BasicThemeClass.btnDefaultBgStart = 'none';
+BasicThemeClass.btnDefaultBgEnd = 'none';
+BasicThemeClass.btnDefaultHoverBg = '#F0F0F0';
+BasicThemeClass.btnDefaultHoverBgStart = 'none';
+BasicThemeClass.btnDefaultHoverBgEnd = 'none';
+BasicThemeClass.btnDefaultActiveBg = '#E6E6E6';
+BasicThemeClass.btnDefaultHoverTextColor = '';
+BasicThemeClass.btnDefaultBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.btnDefaultActiveShadow = 'none';
+BasicThemeClass.btnSuccessBg = '#26AD50';
+BasicThemeClass.btnSuccessBorderColor = '#26AD50';
+BasicThemeClass.btnSuccessHoverBg = '#23A14A';
+BasicThemeClass.btnSuccessHoverBorderColor = '#23A14A';
+BasicThemeClass.btnSuccessHoverTextColor = '';
+BasicThemeClass.btnSuccessBgStart = 'none';
+BasicThemeClass.btnSuccessBgEnd = 'none';
+BasicThemeClass.btnSuccessTextColor = '#fff';
+BasicThemeClass.btnSuccessHoverBgStart = 'none';
+BasicThemeClass.btnSuccessHoverBgEnd = 'none';
+BasicThemeClass.btnSuccessActiveBg = '#209644';
+BasicThemeClass.btnSuccessActiveBorderColor = '#209644';
+BasicThemeClass.btnSuccessActiveShadow = 'none';
+BasicThemeClass.btnPrimaryBg = '#3D3D3D';
+BasicThemeClass.btnPrimaryHoverBg = '#292929';
+BasicThemeClass.btnPrimaryActiveBg = '#141414';
+BasicThemeClass.btnPrimaryHoverTextColor = '';
+BasicThemeClass.btnPrimaryBorderColor = '#3D3D3D';
+BasicThemeClass.btnPrimaryHoverBorderColor = '#292929';
+BasicThemeClass.btnPrimaryActiveBorderColor = '#141414';
+BasicThemeClass.btnPrimaryBgStart = 'none';
+BasicThemeClass.btnPrimaryBgEnd = 'none';
+BasicThemeClass.btnPrimaryTextColor = '#fff';
+BasicThemeClass.btnPrimaryHoverBgStart = 'none';
+BasicThemeClass.btnPrimaryHoverBgEnd = 'none';
+BasicThemeClass.btnPrimaryActiveShadow = 'none';
+BasicThemeClass.btnDangerHoverBg = '#ED3F3F';
+BasicThemeClass.btnDangerHoverBorderColor = '#ED3F3F';
+BasicThemeClass.btnDangerHoverTextColor = '';
+BasicThemeClass.btnDangerBgStart = 'none';
+BasicThemeClass.btnDangerBgEnd = 'none';
+BasicThemeClass.btnDangerTextColor = '#fff';
+BasicThemeClass.btnDangerHoverBgStart = 'none';
+BasicThemeClass.btnDangerHoverBgEnd = 'none';
+BasicThemeClass.btnDangerActiveBg = '#DD3333';
+BasicThemeClass.btnDangerActiveShadow = 'none';
+BasicThemeClass.btnPayBg = '#fcb73e';
+BasicThemeClass.btnPayHoverBg = '#fda70c';
+BasicThemeClass.btnPayHoverBorderColor = '#fda70c';
+BasicThemeClass.btnPayHoverTextColor = '';
+BasicThemeClass.btnPayBorderColor = '#fcb73e';
+BasicThemeClass.btnPayBgStart = 'none';
+BasicThemeClass.btnPayBgEnd = 'none';
+BasicThemeClass.btnPayHoverBgStart = 'none';
+BasicThemeClass.btnPayHoverBgEnd = 'none';
+BasicThemeClass.btnPayActiveBg = '#f69912';
+BasicThemeClass.btnPayActiveBorderColor = '#f69912';
+BasicThemeClass.btnPayActiveShadow = 'none';
+BasicThemeClass.btnMenuArrowColor = '#a6a6a6';
+BasicThemeClass.btnDisabledBg = 'rgba(0, 0, 0, 0.06)';
+BasicThemeClass.btnInsetColor = '#fff';
+BasicThemeClass.btnBacklessBg = 'transparent';
+BasicThemeClass.btnBacklessHoverBg = 'rgba(0, 0, 0, 0.06)';
+BasicThemeClass.btnBacklessActiveBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.btnBacklessHoverTextColor = '';
+BasicThemeClass.btnTextBg = 'transparent';
+BasicThemeClass.btnTextHoverBg = 'rgba(0, 0, 0, 0.06)';
+BasicThemeClass.btnTextActiveBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.btnTextHoverTextColor = '';
+BasicThemeClass.btnWithIconPaddingLeftSmall = '8px';
+BasicThemeClass.btnWithIconPaddingLeftMedium = '10px';
+BasicThemeClass.btnWithIconPaddingLeftLarge = '12px';
+BasicThemeClass.btnIconColor = '';
+BasicThemeClass.btnIconHoverColor = '';
+BasicThemeClass.btnIconDisabledColor = '';
+BasicThemeClass.selectPlaceholderColor = '#adadad';
+BasicThemeClass.selectPaddingXSmall = '7px';
+BasicThemeClass.selectPaddingXMedium = '11px';
+BasicThemeClass.selectPaddingXLarge = '15px';
+BasicThemeClass.selectRootWidthMobile = 'auto';
+BasicThemeClass.mobileSelectMaxWidth = '100%';
+BasicThemeClass.selectBorderColorTransition = "box-shadow " + _BasicThemeClass.transitionDuration + " " + _BasicThemeClass.transitionTimingFunction + ";"; //#endregion Select
+//#region Tooltip
+BasicThemeClass.tooltipPaddingY = '16px';
+BasicThemeClass.tooltipPaddingX = '16px';
+BasicThemeClass.tooltipCloseBtnPadding = '4px';
+BasicThemeClass.tooltipCloseBtnSide = '16px';
+BasicThemeClass.tooltipCloseBtnColor = 'rgba(0, 0, 0, 0.32)';
+BasicThemeClass.tooltipCloseBtnHoverColor = 'rgba(0, 0, 0, 0.5)';
+BasicThemeClass.tooltipBg = '#fff';
+BasicThemeClass.tooltipBorderRadius = '8px';
+BasicThemeClass.tooltipPinOffsetX = '16px';
+BasicThemeClass.tooltipPinOffsetY = '18px';
+BasicThemeClass.tooltipMargin = '10px';
+BasicThemeClass.kebabMargin = '4px';
+BasicThemeClass.kebabBackground = 'transparent';
+BasicThemeClass.kebabBackgroundHover = 'rgba(0, 0, 0, 0.06)';
+BasicThemeClass.kebabBackgroundActive = 'rgba(0, 0, 0, 0.10)';
+BasicThemeClass.kebabBorderRadius = '50%';
+BasicThemeClass.kebabBorder = '2px solid transparent';
+BasicThemeClass.kebabSizeSmall = '24px';
+BasicThemeClass.kebabSizeMedium = '32px';
+BasicThemeClass.kebabSizeLarge = '40px';
+BasicThemeClass.kebabIconSizeSmall = '16px';
+BasicThemeClass.kebabIconSizeMedium = '20px';
+BasicThemeClass.kebabIconSizeLarge = '24px';
+BasicThemeClass.kebabIconColor = '#757575'; //#endregion
+//#region Modal
+BasicThemeClass.modalWindowShadow = '0px 16px 32px 0px rgba(0, 0, 0, 0.06)';
+BasicThemeClass.modalBackBg = '#000';
+BasicThemeClass.modalBackOpacity = '0.16';
+BasicThemeClass.modalCloseButtonColor = 'rgba(0, 0, 0, 0.32)';
+BasicThemeClass.modalCloseButtonDisabledColor = '#8b8b8b';
+BasicThemeClass.modalCloseButtonHoverColor = 'rgba(0, 0, 0, 0.865)';
+BasicThemeClass.modalCloseButtonPadding = '32px';
+BasicThemeClass.modalCloseButtonBottomPadding = '20px'; /** @deprecated use modalCloseButtonClickArea[Top/Bottom/Left/Right] instead */
+BasicThemeClass.modalCloseButtonClickArea = '6px';
+BasicThemeClass.modalCloseButtonClickAreaTop = '6px';
+BasicThemeClass.modalCloseButtonClickAreaBottom = '6px';
+BasicThemeClass.modalCloseButtonClickAreaLeft = '6px';
+BasicThemeClass.modalCloseButtonClickAreaRight = '6px';
+BasicThemeClass.modalCloseIconSize = '20px';
+BasicThemeClass.modalBorderRadius = '16px';
+BasicThemeClass.modalFixedHeaderBorder = 'none';
+BasicThemeClass.modalFixedFooterBorder = 'none';
+BasicThemeClass.modalFixedPanelShadow = 'none';
+BasicThemeClass.modalAdaptiveThreshold = '425px';
+BasicThemeClass.modalPaddingTop = '24px';
+BasicThemeClass.modalPaddingLeft = '32px';
+BasicThemeClass.modalPaddingRight = '32px';
+BasicThemeClass.modalHeaderFontSize = '24px';
+BasicThemeClass.modalHeaderFontWeight = '700';
+BasicThemeClass.modalHeaderLineHeight = '32px';
+BasicThemeClass.modalHeaderPaddingBottom = '16px';
+BasicThemeClass.modalHeaderPaddingTop = '24px';
+BasicThemeClass.modalFixedHeaderMarginBottom = '0px';
+BasicThemeClass.modalFixedFooterMarginTop = '0px';
+BasicThemeClass.modalSeparatorBorderBottom = '1px solid #E6E6E6';
+BasicThemeClass.modalSeparatorMargin = '0 32px';
+BasicThemeClass.modalSeparatorFixedMargin = '0 16px';
+BasicThemeClass.modalBodyTextColor = 'inherit';
+BasicThemeClass.modalFooterTextColor = 'inherit';
+BasicThemeClass.modalBodyPaddingTop = '0';
+BasicThemeClass.modalBodyPaddingBottom = '20px';
+BasicThemeClass.modalBodyBorderRadius = '0px';
+BasicThemeClass.modalFooterPaddingTop = '0px';
+BasicThemeClass.modalFooterPaddingBottom = '20px';
+BasicThemeClass.modalPaddingBottom = '40px';
+BasicThemeClass.modalFooterPanelPaddingTop = '20px';
+BasicThemeClass.mobileModalCloseButtonRightPadding = '16px';
+BasicThemeClass.mobileModalCloseButtonTopPadding = '8px';
+BasicThemeClass.mobileModalCloseButtonClickArea = '16px';
+BasicThemeClass.mobileModalWithoutHeaderCloseButtonPadding = '10px';
+BasicThemeClass.mobileModalCloseIconSize = '20px';
+BasicThemeClass.mobileModalHeaderFontSize = '24px';
+BasicThemeClass.mobileModalHeaderLineHeight = '32px';
+BasicThemeClass.mobileModalHeaderPadding = '16px';
+BasicThemeClass.mobileModalBodyPadding = '0 16px 16px 16px';
+BasicThemeClass.mobileModalBodyPaddingTop = '16px';
+BasicThemeClass.mobileModalBodyPaddingBottom = '16px';
+BasicThemeClass.mobileModalBodyFontSize = '16px';
+BasicThemeClass.mobileModalFooterPadding = '16px';
+BasicThemeClass.mobileModalPaddingBottom = '16px';
+BasicThemeClass.mobileModalContainerHeight = '100%';
+BasicThemeClass.mobileModalContainerMarginTop = '0';
+BasicThemeClass.mobileModalContainerMarginRight = '0';
+BasicThemeClass.mobileModalContainerMarginBottom = '0';
+BasicThemeClass.mobileModalContainerMarginLeft = '0';
+BasicThemeClass.sidePageBackingBg = '#000';
+BasicThemeClass.sidePageBackingBgOpacity = '0.16';
+BasicThemeClass.sidePageCloseButtonColor = 'rgba(0, 0, 0, 0.374)';
+BasicThemeClass.sidePageCloseButtonHoverColor = 'rgba(0, 0, 0, 0.5)';
+BasicThemeClass.sidePageContainerShadow = '0 5px 10px rgba(0, 0, 0, 0.2)';
+BasicThemeClass.mobileSidePagePaddingLeft = '16px';
+BasicThemeClass.mobileSidePagePaddingRight = '16px';
+BasicThemeClass.mobileSidePagePaddingTop = '16px';
+BasicThemeClass.mobileSidePagePaddingBottom = '16px';
+BasicThemeClass.mobileSidePageFooterPadding = '16px';
+BasicThemeClass.sidePagePaddingLeft = '32px';
+BasicThemeClass.sidePagePaddingRight = '36px';
+BasicThemeClass.sidePagePaddingTop = '24px';
+BasicThemeClass.sidePagePaddingBottom = '40px';
+BasicThemeClass.sidePageFooterPaddingTop = '20px';
+BasicThemeClass.sidePageFooterPaddingBottom = '20px';
+BasicThemeClass.sidePageBgDefault = '#fff';
+BasicThemeClass.sidePageBodyTextColor = 'inherit';
+BasicThemeClass.sidePageFooterTextColor = 'inherit';
+BasicThemeClass.sidePageHeaderFontSize = '24px';
+BasicThemeClass.sidePageHeaderLineHeight = '32px';
+BasicThemeClass.sidePageHeaderPaddingBottom = '16px';
+BasicThemeClass.sidePageHeaderPaddingTop = '24px';
+BasicThemeClass.sidePageHeaderFixedFontSize = '18px';
+BasicThemeClass.sidePageHeaderFixedLineHeight = '28px';
+BasicThemeClass.sidePageHeaderFixedPaddingY = '10px';
+BasicThemeClass.sidePageHeaderStickyOffset = '9px'; /** @deprecated use sidePageCloseButtonClickAreaLeft and sidePageCloseButtonClickAreaRight instead */
+BasicThemeClass.sidePageCloseButtonPadding = '32px';
+BasicThemeClass.mobileSidePageCloseButtonPadding = '16px';
+BasicThemeClass.sidePageCloseIconSize = '20px'; /** @deprecated use sidePageCloseButtonClickArea[Top/Bottom/Left/Right] instead */
+BasicThemeClass.sidePageCloseButtonClickArea = '6px';
+BasicThemeClass.sidePageCloseButtonClickAreaTop = '6px';
+BasicThemeClass.sidePageCloseButtonClickAreaBottom = '6px';
+BasicThemeClass.sidePageCloseButtonClickAreaLeft = '6px';
+BasicThemeClass.sidePageCloseButtonClickAreaRight = '6px';
+BasicThemeClass.sidePageCloseButtonFixedClickAreaBottom = '14px';
+BasicThemeClass.mobileSidePageCloseButtonClickArea = '16px';
+BasicThemeClass.sidePageFixedPanelShadow = 'none';
+BasicThemeClass.mobileSidePageHeaderFontSize = '24px';
+BasicThemeClass.mobileSidePageHeaderLineHeight = '32px';
+BasicThemeClass.mobileSidePageHeaderPaddingBottom = '16px';
+BasicThemeClass.mobileSidePageHeaderPaddingTop = '16px'; /** @deprecated use mobileSidePageCloseButtonPadding instead */
+BasicThemeClass.mobileSidePageCloseButtonRightPadding = '12px';
+BasicThemeClass.sidePageHeaderFontWeight = 'bold';
+BasicThemeClass.sidePageCloseButtonWrapperOffsetTop = '4px';
+BasicThemeClass.sidePageCloseButtonWrapperFixedOffsetTop = '4px';
+BasicThemeClass.dateInputMaskColor = '#b8b8b8';
+BasicThemeClass.dateInputComponentSelectedBgColor = '';
+BasicThemeClass.dateInputComponentSelectedTextColor = '';
+BasicThemeClass.calendarBorderRadius = '8px';
+BasicThemeClass.calendarCellHoverColor = '';
+BasicThemeClass.calendarCellActiveHoverColor = '';
+BasicThemeClass.calendarCellTodayBorder = '1px solid';
+BasicThemeClass.calendarCellBorderRadius = '9999px';
+BasicThemeClass.calendarCellSelectedBgColor = '#E6E6E6';
+BasicThemeClass.calendarCellSelectedFontColor = 'inherit';
+BasicThemeClass.calendarCellHeight = '32px';
+BasicThemeClass.calendarCellFontSize = '14px';
+BasicThemeClass.calendarMonthTitleBorderBottomColor = '#dfdede';
+BasicThemeClass.calendarCellHoverBgColor = '#F0F0F0';
+BasicThemeClass.calendarPaddingX = '18px';
+BasicThemeClass.calendarMonthTitleLineHeight = '20px';
+BasicThemeClass.calendarMonthTitlePaddingTop = '12px';
+BasicThemeClass.calendarMonthTitlePaddingBottom = '8px';
+BasicThemeClass.calendarMonthTitleMarginX = '6px';
+BasicThemeClass.calendarMonthTitleMarginBottom = '6px';
+BasicThemeClass.calendarWrapperHeight = ' 330px';
+BasicThemeClass.calendarMonthMarginBottom = '6px';
+BasicThemeClass.calendarMaxMonthsToAppendOnScroll = '5';
+BasicThemeClass.calendarGridRowSpacing = '0px';
+BasicThemeClass.pickerShadow = '0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12)';
+BasicThemeClass.mobileCalendarPaddingX = '16px';
+BasicThemeClass.mobileCalendarCellWidth = '40px';
+BasicThemeClass.mobileCalendarCellHeight = '40px';
+BasicThemeClass.mobileCalendarCellBorderRadius = '20px';
+BasicThemeClass.mobileCalendarCellFontSize = '16px';
+BasicThemeClass.mobileCalendarGridRowSpacing = '8px';
+BasicThemeClass.mobileCalendarWrapperHeight = '304px'; //#endregion DatePicker
+//#region DateRangePicker
+BasicThemeClass.rangeCalendarCellBg = '#f0f0f0';
+BasicThemeClass.rangeCalendarCellEndBg = '#1e1e1e';
+BasicThemeClass.rangeCalendarCellEndColor = 'white';
+BasicThemeClass.rangeCalendarCellHoverBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.rangeCalendarWrapperHeight = '450px';
+BasicThemeClass.mobileRangeCalendarCellHeight = '42px';
+BasicThemeClass.mobileRangeCalendarCellWidth = '42px';
+BasicThemeClass.mobileRangeCalendarGridRowSpacing = '0px';
+BasicThemeClass.mobileRangeCalendarWrapperHeight = '400px';
+BasicThemeClass.dateSelectMenuItemBgActive = '#F0F0F0';
+BasicThemeClass.dateSelectMenuItemFontActive = '';
+BasicThemeClass.dateSelectLineHeight = '20px';
+BasicThemeClass.dateSelectFontSize = '14px';
+BasicThemeClass.dateSelectFontWeight = 'bold';
+BasicThemeClass.dateSelectMenuItemBgSelected = '#ececec';
+BasicThemeClass.dateSelectTextColorInvert = '';
+BasicThemeClass.mobileDateSelectFontSize = '16px';
+BasicThemeClass.mobileDateSelectLineHeight = '20px';
+BasicThemeClass.pagingLineHeight = '22px';
+BasicThemeClass.pagingPageLinkBoxSizing = 'border-box'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
+BasicThemeClass.pagingPageLinkMinWidth = '0.75em'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
+                                                   * @see {@link pagingPageLinkPaddingYSmall `pagingPageLinkPaddingYSmall`} */
+BasicThemeClass.pagingPageLinkPaddingY = '0.3125em'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
+                                                     * @see {@link pagingPageLinkPaddingXSmall `pagingPageLinkPaddingXSmall`} */
+BasicThemeClass.pagingPageLinkPaddingX = '12px';
+BasicThemeClass.pagingPageLinkPaddingYSmall = '6px';
+BasicThemeClass.pagingPageLinkPaddingXSmall = '11.5px';
+BasicThemeClass.pagingPageLinkPaddingYMedium = '9px';
+BasicThemeClass.pagingPageLinkPaddingXMedium = '15px';
+BasicThemeClass.pagingPageLinkPaddingYLarge = '12px';
+BasicThemeClass.pagingPageLinkPaddingXLarge = '18.5px'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
+BasicThemeClass.pagingPageLinkMargin = '0px 1px';
+BasicThemeClass.pagingPageLinkBorderRadius = '9999px';
+BasicThemeClass.pagingPageLinkActiveBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.pagingPageLinkDisabledActiveBg = 'rgba(0, 0, 0, 0.04)';
+BasicThemeClass.pagingPageLinkHoverBg = 'rgba(0, 0, 0, 0.06)'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
+BasicThemeClass.pagingPageForwardLinkMarginTop = ''; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
+BasicThemeClass.pagingPageForwardLinkMarginLeft = '0px';
+BasicThemeClass.pagingForwardLinkPaddingSmall = '6px 8px 6px 12px';
+BasicThemeClass.pagingForwardLinkPaddingMedium = '9px 12px 9px 16px';
+BasicThemeClass.pagingForwardLinkPaddingLarge = '12px 16px 12px 20px';
+BasicThemeClass.pagingForwardLinkPaddingMediumMobile = '10px';
+BasicThemeClass.pagingForwardLinkPaddingLargeMobile = '12px';
+BasicThemeClass.pagingDotsPadding = '0.375em 0.625em 0';
+BasicThemeClass.pagingDotsPaddingSmall = '11px 8px 5px 8px';
+BasicThemeClass.pagingDotsPaddingMedium = '14px 12px 10px 12px';
+BasicThemeClass.pagingDotsPaddingLarge = '19px 16px 13px 16px';
+BasicThemeClass.pagingDotsColor = '#ADADAD';
+BasicThemeClass.pagingPageLinkHintFontSize = '12px';
+BasicThemeClass.pagingPageLinkHintLineHeight = '16px';
+BasicThemeClass.pagingPageLinkHintMargin = '4px -20px 0px';
+BasicThemeClass.hintMaxWidth = '200px';
+BasicThemeClass.hintPaddingY = '4px';
+BasicThemeClass.hintPaddingX = '8px';
+BasicThemeClass.hintTextAlign = 'center';
+BasicThemeClass.hintBgColor = 'rgba(0, 0, 0, 0.76)';
+BasicThemeClass.hintBorder = 'none';
+BasicThemeClass.hintBorderRadius = '6px';
+BasicThemeClass.hintMargin = '8px';
+BasicThemeClass.toastPaddingY = '10px';
+BasicThemeClass.toastPaddingX = '16px';
+BasicThemeClass.toastBorderRadius = '8px';
+BasicThemeClass.toastBorder = 'none';
+BasicThemeClass.toastTop = '24px';
+BasicThemeClass.toastBg = 'rgba(0, 0, 0, 0.76)';
+BasicThemeClass.toastColor = 'white';
+BasicThemeClass.toastLinkColor = '#fff';
+BasicThemeClass.toastLinkTextDecorationHover = '';
+BasicThemeClass.toastLinkBgHover = 'rgba(255, 255, 255, 0.12)';
+BasicThemeClass.toastLinkBgActive = 'rgba(0, 0, 0, 0.87)';
+BasicThemeClass.toastLinkPadding = '12px';
+BasicThemeClass.toastClosePadding = '16px';
+BasicThemeClass.toastCloseColor = 'rgba(255, 255, 255, 0.6)';
+BasicThemeClass.toastCloseHoverColor = 'white';
+BasicThemeClass.toastCloseSize = '16px'; //#endregion Toast
+//#region Dropdown
+BasicThemeClass.dropdownMenuBorderColorTransition = '';
+BasicThemeClass.dropdownMenuMenuBoxSizing = 'content-box';
+BasicThemeClass.dropdownButtonBorderRadiusSmall = '8px';
+BasicThemeClass.dropdownButtonBorderRadiusMedium = '8px';
+BasicThemeClass.dropdownButtonBorderRadiusLarge = '8px';
+BasicThemeClass.menuBorderRadius = '8px';
+BasicThemeClass.menuBorder = 'none';
+BasicThemeClass.menuShadow = '0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12)';
+BasicThemeClass.menuPaddingY = '0px';
+BasicThemeClass.menuScrollContainerContentWrapperPaddingY = '4px';
+BasicThemeClass.mobileMenuPaddingY = '0px';
+BasicThemeClass.mobileMenuScrollContainerContentWrapperPaddingY = '0px';
+BasicThemeClass.menuPaddingX = '4px';
+BasicThemeClass.mobileMenuPaddingX = '8px';
+BasicThemeClass.menuOffsetY = '4px';
+BasicThemeClass.menuBoxSizing = 'border-box';
+BasicThemeClass.menuItemSelectedBg = '#E6E6E6';
+BasicThemeClass.menuItemHoverBg = '#F0F0F0';
+BasicThemeClass.menuItemIconWidthSmall = '16px';
+BasicThemeClass.menuItemIconWidthMedium = '20px';
+BasicThemeClass.menuItemIconWidthLarge = '24px';
+BasicThemeClass.menuItemIconGap = '4px';
+BasicThemeClass.menuItemPaddingXSmall = '8px';
+BasicThemeClass.menuItemPaddingYSmall = '6px';
+BasicThemeClass.menuItemPaddingXMedium = '12px';
+BasicThemeClass.menuItemPaddingYMedium = '9px';
+BasicThemeClass.menuItemPaddingXLarge = '16px';
+BasicThemeClass.menuItemPaddingYLarge = '12px';
+BasicThemeClass.menuItemBorderRadius = '6px';
+BasicThemeClass.menuItemCommentOpacity = '0.6';
+BasicThemeClass.menuItemDisplay = 'block';
+BasicThemeClass.menuItemPaddingMobile = '12px 16px';
+BasicThemeClass.menuItemDisabledBg = 'transparent';
+BasicThemeClass.menuItemGap = '1px'; //menuHeader
+BasicThemeClass.menuHeaderColor = '#757575';
+BasicThemeClass.menuHeaderLineHeightSmall = '16px';
+BasicThemeClass.menuHeaderLineHeightMedium = '20px';
+BasicThemeClass.menuHeaderLineHeightLarge = '22px';
+BasicThemeClass.menuHeaderFontSizeSmall = '12px';
+BasicThemeClass.menuHeaderFontSizeMedium = '14px';
+BasicThemeClass.menuHeaderFontSizeLarge = '16px';
+BasicThemeClass.menuHeaderPaddingXSmall = '8px';
+BasicThemeClass.menuHeaderPaddingTopSmall = '12px';
+BasicThemeClass.menuHeaderPaddingBottomSmall = '4px';
+BasicThemeClass.menuHeaderPaddingXMedium = '12px';
+BasicThemeClass.menuHeaderPaddingTopMedium = '14px';
+BasicThemeClass.menuHeaderPaddingBottomMedium = '6px';
+BasicThemeClass.menuHeaderPaddingXLarge = '16px';
+BasicThemeClass.menuHeaderPaddingTopLarge = '18px';
+BasicThemeClass.menuHeaderPaddingBottomLarge = '8px';
+BasicThemeClass.menuHeaderTotalCountPaddingTopSmall = '4px';
+BasicThemeClass.menuHeaderTotalCountPaddingTopMedium = '6px';
+BasicThemeClass.menuHeaderTotalCountPaddingTopLarge = '8px';
+BasicThemeClass.menuHeaderTotalCountPaddingBottomSmall = '12px';
+BasicThemeClass.menuHeaderTotalCountPaddingBottomMedium = '14px';
+BasicThemeClass.menuHeaderTotalCountPaddingBottomLarge = '18px';
+BasicThemeClass.menuSeparatorBorderColor = '#ebebeb';
+BasicThemeClass.menuSeparatorMarginY = '2px';
+BasicThemeClass.menuSeparatorMarginX = '8px';
+BasicThemeClass.menuSeparatorBorderWidth = '1px'; // mobileMenuSeparator
+BasicThemeClass.mobileMenuSeparatorMarginY = '4px';
+BasicThemeClass.mobileMenuSeparatorMarginX = '24px';
+BasicThemeClass.toggleHandleActiveWidthIncrement = '0px';
+BasicThemeClass.toggleHeightSmall = '20px';
+BasicThemeClass.toggleWidthSmall = '32px';
+BasicThemeClass.toggleHeightMedium = '22px';
+BasicThemeClass.toggleWidthMedium = '34px';
+BasicThemeClass.toggleHeightLarge = '24px';
+BasicThemeClass.toggleWidthLarge = '36px';
+BasicThemeClass.toggleBaseBg = '#fff';
+BasicThemeClass.toggleBgHover = '#F0F0F0';
+BasicThemeClass.toggleBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.toggleHandleSizeSmall = '14px';
+BasicThemeClass.toggleHandleSizeMedium = '16px';
+BasicThemeClass.toggleHandleSizeLarge = '18px';
+BasicThemeClass.toggleHandleLeft = '3px';
+BasicThemeClass.toggleHandleTop = '3px';
+BasicThemeClass.toggleBgFocus = 'linear-gradient(-180deg, #f1f1f1, #dedede)';
+BasicThemeClass.toggleCaptionGap = '8px';
+BasicThemeClass.toggleButtonOffsetY = '0px';
+BasicThemeClass.toggleContainerBg = '#FFFFFF';
+BasicThemeClass.toggleHandleBg = '#FFFFFF';
+BasicThemeClass.toggleHandleBoxShadow = '0 0 0 1px rgba(0, 0, 0, 0.16)';
+BasicThemeClass.toggleContainerBoxShadow = 'inset 0 0 0 1px rgba(0, 0, 0, 0.16)'; // idle :hover
+BasicThemeClass.toggleContainerBoxShadowHover = 'inset 0 0 0 1px rgba(0, 0, 0, 0.16)';
+BasicThemeClass.toggleHandleBgHover = '#FFFFFF';
+BasicThemeClass.toggleHandleBoxShadowHover = '0 0 0 1px rgba(0, 0, 0, 0.16)';
+BasicThemeClass.toggleContainerBoxShadowChecked = 'none';
+BasicThemeClass.toggleHandleBoxShadowChecked = 'none';
+BasicThemeClass.toggleHandleBgChecked = '#FFFFFF';
+BasicThemeClass.toggleBgChecked = '#3D3D3D';
+BasicThemeClass.toggleCheckedBg = '#fff';
+BasicThemeClass.toggleCheckedBgHover = '#fff'; // checked :hover
+BasicThemeClass.toggleContainerBoxShadowCheckedHover = 'none';
+BasicThemeClass.toggleContainerBgCheckedHover = '#292929';
+BasicThemeClass.toggleHandleBoxShadowCheckedHover = 'none';
+BasicThemeClass.toggleHandleBgCheckedHover = '#F0F0F0'; // disabled
+BasicThemeClass.toggleContainerBgDisabled = '#F0F0F0';
+BasicThemeClass.toggleHandleBgDisabled = 'transparent';
+BasicThemeClass.toggleContainerBoxShadowDisabled = 'inset 0 0 0 1px rgba(0, 0, 0, 0.1)';
+BasicThemeClass.toggleHandleBoxShadowDisabled = '0 0 0 1px rgba(0, 0, 0, 0.1)';
+BasicThemeClass.toggleDisabledHandleBg = '#fff';
+BasicThemeClass.toggleContainerBgDisabledChecked = '#D6D6D6';
+BasicThemeClass.toggleHandleBgDisabledChecked = '#F0F0F0';
+BasicThemeClass.toggleContainerBoxShadowDisabledChecked = 'none';
+BasicThemeClass.toggleHandleBoxShadowDisabledChecked = 'none';
+BasicThemeClass.toggleBgDisabledChecked = '#dadada'; //#endregion Toggle
+//#region Popup
+BasicThemeClass.popupBorder = 'none';
+BasicThemeClass.popupBorderRadius = '8px';
+BasicThemeClass.popupBorderColor = 'transparent';
+BasicThemeClass.popupDropShadow = 'drop-shadow(0px 32px 32px rgba(0, 0, 0, 0.08)) drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.12))';
+BasicThemeClass.popupBoxShadow = '0px 32px 32px -16px rgba(0, 0, 0, 0.08), 0px 0px 24px 0px rgba(0, 0, 0, 0.12)';
+BasicThemeClass.popupPinOffsetX = '16px';
+BasicThemeClass.popupPinOffsetY = '16px';
+BasicThemeClass.popupMargin = '10px';
+BasicThemeClass.popupPinSize = '8px';
+BasicThemeClass.popupMenuMenuOffsetY = '0px';
+BasicThemeClass.inputShadow = 'none';
+BasicThemeClass.inputBg = 'white';
+BasicThemeClass.inputIconColor = '#858585';
+BasicThemeClass.inputColor = 'inherit';
+BasicThemeClass.inputWidth = '200px';
+BasicThemeClass.inputPaddingXSmall = '7px';
+BasicThemeClass.inputPaddingXMedium = '11px';
+BasicThemeClass.inputPaddingXLarge = '15px';
+BasicThemeClass.inputIconGapSmall = '4px';
+BasicThemeClass.inputIconGapMedium = '6px';
+BasicThemeClass.inputIconGapLarge = '8px';
+BasicThemeClass.inputIconSizeSmall = '16px';
+BasicThemeClass.inputIconSizeMedium = '20px';
+BasicThemeClass.inputIconSizeLarge = '24px';
+BasicThemeClass.inputBackgroundClip = 'padding-box';
+BasicThemeClass.inputBorderRadiusSmall = '2px';
+BasicThemeClass.inputBorderRadiusMedium = '2px';
+BasicThemeClass.inputBorderRadiusLarge = '2px';
+BasicThemeClass.inputDisabledBackgroundClip = 'padding-box';
+BasicThemeClass.inputBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.inputBorderColorHover = 'rgba(0, 0, 0, 0.32)';
+BasicThemeClass.inputBlinkColor = 'rgba(61, 61, 61, 0.2)';
+BasicThemeClass.inputColorScheme = 'light';
+BasicThemeClass.checkboxBoxSizeSmall = '16px';
+BasicThemeClass.checkboxBoxSizeMedium = '20px';
+BasicThemeClass.checkboxBoxSizeLarge = '24px';
+BasicThemeClass.checkboxCaptionGap = '8px';
+BasicThemeClass.checkboxBoxOffsetY = '1px';
+BasicThemeClass.checkboxBgStart = '#fdfdfd';
+BasicThemeClass.checkboxBgEnd = '#ededed';
+BasicThemeClass.checkboxBorder = 'none';
+BasicThemeClass.checkboxCheckedColor = '#fff';
+BasicThemeClass.checkboxBorderRadius = '4px';
+BasicThemeClass.checkboxBg = '#fff';
+BasicThemeClass.checkboxCheckedHoverBg = '#292929';
+BasicThemeClass.textareaBg = '#fff';
+BasicThemeClass.textareaShadow = 'none';
+BasicThemeClass.textareaBackgroundClip = 'padding-box';
+BasicThemeClass.textareaBorderRadius = '2px';
+BasicThemeClass.textareaWidth = '250px';
+BasicThemeClass.textareaPaddingXSmall = '7px';
+BasicThemeClass.textareaPaddingXMedium = '11px';
+BasicThemeClass.textareaPaddingXLarge = '15px';
+BasicThemeClass.textareaBorderTopColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.radioBulletSizeSmall = '6px';
+BasicThemeClass.radioBulletSizeMedium = '10px';
+BasicThemeClass.radioBulletSizeLarge = '12px';
+BasicThemeClass.radioSizeSmall = '16px';
+BasicThemeClass.radioSizeMedium = '20px';
+BasicThemeClass.radioSizeLarge = '24px';
+BasicThemeClass.radioCaptionGap = '8px';
+BasicThemeClass.radioVerticalAlign = 'top';
+BasicThemeClass.radioBgImage = 'none';
+BasicThemeClass.radioBgColor = '#fff';
+BasicThemeClass.radioBoxShadow = 'none';
+BasicThemeClass.radioHoverShadow = 'none';
+BasicThemeClass.radioActiveShadow = 'none';
+BasicThemeClass.radioCheckedBorderColor = 'transparent';
+BasicThemeClass.radioCheckedBulletColor = '#fff';
+BasicThemeClass.radioDisabledBg = '#F0F0F0';
+BasicThemeClass.radioCaptionDisplay = 'inline-flex';
+BasicThemeClass.radioBorderWidthCompensation = '0px';
+BasicThemeClass.radioCircleOffsetY = '1px';
+BasicThemeClass.tabPaddingXSmall = '8px';
+BasicThemeClass.tabPaddingXMedium = '10px';
+BasicThemeClass.tabPaddingXLarge = '12px';
+BasicThemeClass.tabBorderWidth = '2px';
+BasicThemeClass.tabColorHover = '#D6D6D6';
+BasicThemeClass.tabIndicatorBorderRadius = '2px';
+BasicThemeClass.spinnerCaptionGapSmall = '6px';
+BasicThemeClass.spinnerCaptionGapMedium = '-4px';
+BasicThemeClass.spinnerCaptionGapLarge = '-3px';
+BasicThemeClass.spinnerCaptionMarginSmall = '0 0 0 6px';
+BasicThemeClass.spinnerCaptionMarginMedium = '0 0 0 6px';
+BasicThemeClass.spinnerCaptionMarginLarge = '0 0 0 6px'; //#endregion
+//#region Switcher
+BasicThemeClass.switcherBorderRadius = '8px';
+BasicThemeClass.switcherButtonPaddingXSmall = '7px';
+BasicThemeClass.switcherButtonPaddingXMedium = '11px';
+BasicThemeClass.switcherButtonPaddingXLarge = '15px';
+BasicThemeClass.switcherBtnDisabledBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.mobilePopupTopPadding = '80px';
+BasicThemeClass.mobilePopupContainerBottomPadding = '8px';
+BasicThemeClass.mobilePopupHeaderPadding = '16px 16px 8px 16px';
+BasicThemeClass.mobilePopupFooterPadding = '16px 16px 16px 16px';
+BasicThemeClass.mobilePopupContainerBorderRadius = '16px';
+BasicThemeClass.mobilePopupHeaderFontWeight = '500';
+BasicThemeClass.mobilePopupHeaderChildPadding = '12px';
+BasicThemeClass.mobilePopupOuterIndentY = '24px'; //#endregion
+//#region ScrollContainer
+BasicThemeClass.scrollContainerScrollBarSize = '4px';
+BasicThemeClass.scrollContainerScrollBarHoverSize = '10px';
+BasicThemeClass.scrollContainerScrollBarColor = 'rgba(183, 183, 183, 0.7)';
+BasicThemeClass.scrollContainerScrollBarInvertColor = 'rgba(255, 255, 255, 0.5)';
+BasicThemeClass.scrollContainerScrollBarOffsetY = '4px';
+BasicThemeClass.dropdownMenuScrollContainerScrollBarOffsetY = '0px'; //#endregion
+//#region PasswordInput
+BasicThemeClass.passwordInputVisibilityIconColor = '#000';
+BasicThemeClass.passwordInputVisibilityIconOpacity = '0.6';
+BasicThemeClass.passwordInputVisibilityIconHoverColor = '#000';
+BasicThemeClass.passwordInputVisibilityIconHoverOpacity = '1';
+BasicThemeClass.globalLoaderHeight = '4px';
+BasicThemeClass.globalLoaderWidth = '100%';
+BasicThemeClass.globalLoaderPosition = 'fixed';
+BasicThemeClass.globalLoaderTop = '0px';
+BasicThemeClass.globalLoaderLeft = '0px';
+BasicThemeClass.globalLoaderBottom = 'auto';
+BasicThemeClass.globalLoaderRight = 'auto';
+BasicThemeClass.globalLoaderBackgroundColor = 'transparent';
+BasicThemeClass.globalLoaderTransitionToSpinnerDuration = '500'; //ms
+BasicThemeClass.globalLoaderSpinnerAnimationDuration = '2000'; //ms
+BasicThemeClass.globalLoaderSlowAnimationDuration = '20000'; //ms
+BasicThemeClass.globalLoaderTransitionFromSpinnerDuration = '200'; //ms
+//#endregion
+//#region FileUploader
+BasicThemeClass.fileUploaderWidth = '362px';
+BasicThemeClass.fileUploaderBg = '';
+BasicThemeClass.fileUploaderUploadButtonBg = '#fff';
+BasicThemeClass.fileUploaderBorderRadius = '8px';
+BasicThemeClass.fileUploaderBorderColor = 'rgba(0, 0, 0, 0.37)';
+BasicThemeClass.fileUploaderBorderStyle = 'dashed';
+BasicThemeClass.fileUploaderAfterLinkColor = '#858585';
+BasicThemeClass.fileUploaderIconSize = '14px';
+BasicThemeClass.fileUploaderIconColor = '#222222';
+BasicThemeClass.fileUploaderIconHoverColor = '#333';
+BasicThemeClass.fileUploaderDisabledBgClip = 'padding-box';
+BasicThemeClass.fileUploaderDisabledBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.fileUploaderLinkHoverTextDecoration = 'none';
+BasicThemeClass.fileUploaderHoveredBg = 'rgba(0, 0, 0, 0.06)';
+BasicThemeClass.fileUploaderHoveredBorderColor = 'transparent';
+BasicThemeClass.fileUploaderIconGapSmall = '4px';
+BasicThemeClass.fileUploaderIconGapMedium = '6px';
+BasicThemeClass.fileUploaderIconGapLarge = '8px';
+BasicThemeClass.fileUploaderDragOverShadow = '0px 0px 0px 3px rgb(149, 149, 149), 0px 0px 0px 8px rgba(61, 61, 61, 0.2)';
+BasicThemeClass.clearCrossIconColor = 'rgba(0, 0, 0, 0.54)';
+BasicThemeClass.clearCrossIconHoverColor = 'rgba(0, 0, 0, 0.87)'; //#endregion ClearCrossIcon
+//#region CloseIcon
+BasicThemeClass.closeBtnIconColor = 'rgba(0, 0, 0, 0.32)';
+BasicThemeClass.closeBtnIconDisabledColor = '#8b8b8b';
+BasicThemeClass.closeBtnIconHoverColor = 'rgba(0, 0, 0, 0.865)';
+BasicThemeClass.closeBtnIconBorderRadius = '4px';
+BasicThemeClass.miniModalHeaderPaddingBottom = '0';
+BasicThemeClass.miniModalBodyPaddingTop = '16px';
+BasicThemeClass.miniModalBodyPaddingBottom = '0';
+BasicThemeClass.miniModalDescriptionFontSize = 'inherit';
+BasicThemeClass.miniModalDescriptionLineHeight = 'normal';
+BasicThemeClass.miniModalHeaderPaddingTop = '32px';
+BasicThemeClass.miniModalActionGap = '8px';
+BasicThemeClass.miniModalCancelIndent = '8px';
+BasicThemeClass.miniModalFooterPaddingTop = '24px';
+BasicThemeClass.miniModalFooterPaddingBottom = '32px';
+BasicThemeClass.miniModalTitleMarginTop = '16px';
+BasicThemeClass.miniModalHeightMobile = 'auto';
+BasicThemeClass.miniModalMarginTopMobile = '80px';
+BasicThemeClass.miniModalMarginLeftMobile = '24px';
+BasicThemeClass.miniModalMarginRightMobile = '24px';
+BasicThemeClass.miniModalFooterPaddingMobile = '24px 16px 16px';
+BasicThemeClass.miniModalHeaderPaddingMobile = '32px 16px 0';
+BasicThemeClass.miniModalBodyPaddingMobile = '16px 16px 0';
+BasicThemeClass.validationsTextColorWarning = '#ef8b17';
+export var BasicTheme = createTheme({
+  themeClass: BasicThemeClass
+});
+export var BasicThemeClassForExtension = function BasicThemeClassForExtension() {};