@skbkontur/react-ui 6.4.6-b246a.0 → 6.4.7-b33c6.0

package/index.js

@@ -49,6 +49,7 @@ export * from './components/Tooltip/index.js';
 export * from './components/TooltipMenu/index.js';
 export * from './components/ResponsiveLayout/index.js';
 export * from './components/MaskedInput/index.js';
+export * from './components/ThemeContainer/index.js';
 export * from './lib/featureFlagsContext/index.js';
 export * from './lib/locale/index.js';
 export * from './lib/size/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC","sourcesContent":["export * from './components/Autocomplete/index.js';\nexport * from './components/Button/index.js';\nexport * from './components/Calendar/index.js';\nexport * from './components/Center/index.js';\nexport * from './components/Checkbox/index.js';\nexport * from './components/ComboBox/index.js';\nexport * from './components/CurrencyInput/index.js';\nexport * from './components/CurrencyLabel/index.js';\nexport * from './components/DateInput/index.js';\nexport * from './components/DatePicker/index.js';\nexport * from './components/DateRangePicker/index.js';\nexport * from './components/Dropdown/index.js';\nexport * from './components/DropdownMenu/index.js';\nexport * from './components/FileUploader/index.js';\nexport * from './components/FxInput/index.js';\nexport * from './components/Gapped/index.js';\nexport * from './components/GlobalLoader/index.js';\nexport * from './components/Group/index.js';\nexport * from './components/Hint/index.js';\nexport * from './components/Input/index.js';\nexport * from './components/Kebab/index.js';\nexport * from './components/Link/index.js';\nexport * from './components/Loader/index.js';\nexport * from './components/MenuFooter/index.js';\nexport * from './components/MenuHeader/index.js';\nexport * from './components/MenuItem/index.js';\nexport * from './components/MenuSeparator/index.js';\nexport * from './components/MiniModal/index.js';\nexport * from './components/Modal/index.js';\nexport * from './components/Paging/index.js';\nexport * from './components/PasswordInput/index.js';\nexport * from './components/Radio/index.js';\nexport * from './components/RadioGroup/index.js';\nexport * from './components/ScrollContainer/index.js';\nexport * from './components/Select/index.js';\nexport * from './components/SidePage/index.js';\nexport * from './components/Spinner/index.js';\nexport * from './components/Sticky/index.js';\nexport * from './components/Switcher/index.js';\nexport * from './components/Tabs/index.js';\nexport * from './components/Textarea/index.js';\nexport * from './components/TimePicker/index.js';\nexport * from './components/Toast/index.js';\nexport * from './components/SingleToast/index.js';\nexport * from './components/Toggle/index.js';\nexport * from './components/Token/index.js';\nexport * from './components/TokenInput/index.js';\nexport * from './components/Tooltip/index.js';\nexport * from './components/TooltipMenu/index.js';\nexport * from './components/ResponsiveLayout/index.js';\nexport * from './components/MaskedInput/index.js';\nexport * from './lib/featureFlagsContext/index.js';\nexport * from './lib/locale/index.js';\nexport * from './lib/size/index.js';\nexport * from './lib/theming/ThemeContext.js';\nexport * from './lib/theming/ThemeFactory.js';\nexport * from './lib/theming/themes/LightTheme.js';\nexport * from './lib/theming/themes/DarkTheme.js';\nexport * from './lib/types/props.js';\nexport * from './internal/Popup/types.js';\nexport type { PopupMenuCaptionProps } from './internal/PopupMenu/index.js';\nexport * as ColorFunctions from './lib/styles/ColorFunctions.js';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC","sourcesContent":["export * from './components/Autocomplete/index.js';\nexport * from './components/Button/index.js';\nexport * from './components/Calendar/index.js';\nexport * from './components/Center/index.js';\nexport * from './components/Checkbox/index.js';\nexport * from './components/ComboBox/index.js';\nexport * from './components/CurrencyInput/index.js';\nexport * from './components/CurrencyLabel/index.js';\nexport * from './components/DateInput/index.js';\nexport * from './components/DatePicker/index.js';\nexport * from './components/DateRangePicker/index.js';\nexport * from './components/Dropdown/index.js';\nexport * from './components/DropdownMenu/index.js';\nexport * from './components/FileUploader/index.js';\nexport * from './components/FxInput/index.js';\nexport * from './components/Gapped/index.js';\nexport * from './components/GlobalLoader/index.js';\nexport * from './components/Group/index.js';\nexport * from './components/Hint/index.js';\nexport * from './components/Input/index.js';\nexport * from './components/Kebab/index.js';\nexport * from './components/Link/index.js';\nexport * from './components/Loader/index.js';\nexport * from './components/MenuFooter/index.js';\nexport * from './components/MenuHeader/index.js';\nexport * from './components/MenuItem/index.js';\nexport * from './components/MenuSeparator/index.js';\nexport * from './components/MiniModal/index.js';\nexport * from './components/Modal/index.js';\nexport * from './components/Paging/index.js';\nexport * from './components/PasswordInput/index.js';\nexport * from './components/Radio/index.js';\nexport * from './components/RadioGroup/index.js';\nexport * from './components/ScrollContainer/index.js';\nexport * from './components/Select/index.js';\nexport * from './components/SidePage/index.js';\nexport * from './components/Spinner/index.js';\nexport * from './components/Sticky/index.js';\nexport * from './components/Switcher/index.js';\nexport * from './components/Tabs/index.js';\nexport * from './components/Textarea/index.js';\nexport * from './components/TimePicker/index.js';\nexport * from './components/Toast/index.js';\nexport * from './components/SingleToast/index.js';\nexport * from './components/Toggle/index.js';\nexport * from './components/Token/index.js';\nexport * from './components/TokenInput/index.js';\nexport * from './components/Tooltip/index.js';\nexport * from './components/TooltipMenu/index.js';\nexport * from './components/ResponsiveLayout/index.js';\nexport * from './components/MaskedInput/index.js';\nexport * from './components/ThemeContainer/index.js';\nexport * from './lib/featureFlagsContext/index.js';\nexport * from './lib/locale/index.js';\nexport * from './lib/size/index.js';\nexport * from './lib/theming/ThemeContext.js';\nexport * from './lib/theming/ThemeFactory.js';\nexport * from './lib/theming/themes/LightTheme.js';\nexport * from './lib/theming/themes/DarkTheme.js';\nexport * from './lib/types/props.js';\nexport * from './internal/Popup/types.js';\nexport type { PopupMenuCaptionProps } from './internal/PopupMenu/index.js';\nexport * as ColorFunctions from './lib/styles/ColorFunctions.js';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions.js';\n"]}

package/internal/ClearCrossIcon/ClearCrossIcon.css.d.ts

@@ -0,0 +1,18 @@
+export declare const root: string;
+export declare const focus: string;
+export declare const clearCrossSmall: string;
+export declare const clearCrossMedium: string;
+export declare const clearCrossLarge: string;
+export declare const relativeWidthSmall: string;
+export declare const relativeWidthMedium: string;
+export declare const relativeWidthLarge: string;
+export declare const styles: {
+    root: string;
+    focus: string;
+    clearCrossSmall: string;
+    clearCrossMedium: string;
+    clearCrossLarge: string;
+    relativeWidthSmall: string;
+    relativeWidthMedium: string;
+    relativeWidthLarge: string;
+};

package/internal/ClearCrossIcon/ClearCrossIcon.css.js

@@ -0,0 +1,10 @@
+
+export var clearCrossLarge = 'react-ui-ClearCrossIcon__clearCrossLarge';
+export var clearCrossMedium = 'react-ui-ClearCrossIcon__clearCrossMedium';
+export var clearCrossSmall = 'react-ui-ClearCrossIcon__clearCrossSmall';
+export var focus = 'react-ui-ClearCrossIcon__focus';
+export var relativeWidthLarge = 'react-ui-ClearCrossIcon__relativeWidthLarge';
+export var relativeWidthMedium = 'react-ui-ClearCrossIcon__relativeWidthMedium';
+export var relativeWidthSmall = 'react-ui-ClearCrossIcon__relativeWidthSmall';
+export var root = 'react-ui-ClearCrossIcon__root';
+export var styles = {root:'react-ui-ClearCrossIcon__root',focus:'react-ui-ClearCrossIcon__focus',clearCrossSmall:'react-ui-ClearCrossIcon__clearCrossSmall',clearCrossMedium:'react-ui-ClearCrossIcon__clearCrossMedium',clearCrossLarge:'react-ui-ClearCrossIcon__clearCrossLarge',relativeWidthSmall:'react-ui-ClearCrossIcon__relativeWidthSmall',relativeWidthMedium:'react-ui-ClearCrossIcon__relativeWidthMedium',relativeWidthLarge:'react-ui-ClearCrossIcon__relativeWidthLarge'};

package/internal/ClearCrossIcon/ClearCrossIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearCrossIcon.css.js","sourceRoot":"","sources":["ClearCrossIcon.css.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAEjD,kHAAkH;AAC1G,IAAO,UAAU,GAAiC,eAAe,MAAhD,EAAK,uBAAuB,UAAK,eAAe,EAAnE,SAAiD,CAAF,CAAqB;AAE1E,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,uBACpB,uBAAuB,KAC1B,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC1C,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,gBAAS,CAAC,CAAC,kBAAkB,cAAI,CAAC,CAAC,wBAAwB,CAAE,EACzE,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,CAAC,CAAC,mBAAmB,EACrC,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,oBAAa,CAAC,CAAC,gBAAgB,MAAG,EACzC,GAAG,EAAE,oBAAa,CAAC,CAAC,gBAAgB,MAAG,IACvC,CAAC;AAEH,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,wBAAwB,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC;IACnC,KAAK,EAAE,CAAC,CAAC,wBAAwB;IACjC,MAAM,EAAE,CAAC,CAAC,yBAAyB;IACnC,YAAY,EAAE,CAAC,CAAC,+BAA+B;CAChD,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,gBAAgB,GAAG,KAAK,CAAC;IACpC,KAAK,EAAE,CAAC,CAAC,yBAAyB;IAClC,MAAM,EAAE,CAAC,CAAC,0BAA0B;IACpC,YAAY,EAAE,CAAC,CAAC,gCAAgC;CACjD,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC;IACnC,KAAK,EAAE,CAAC,CAAC,wBAAwB;IACjC,MAAM,EAAE,CAAC,CAAC,yBAAyB;IACnC,YAAY,EAAE,CAAC,CAAC,+BAA+B;CAChD,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAElG,MAAM,CAAC,IAAM,mBAAmB,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAEpG,MAAM,CAAC,IAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAElG,qFAAqF;AACrF,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAC5B,WAAW,CAAC,UAAG,IAAI,WAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,wBAAwB,EAAE,CAAC,CAAC;AAEpE,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,IAAI,MAAA;IACJ,KAAK,OAAA;IACL,eAAe,iBAAA;IACf,gBAAgB,kBAAA;IAChB,eAAe,iBAAA;IACf,kBAAkB,oBAAA;IAClB,mBAAmB,qBAAA;IACnB,kBAAkB,oBAAA;CACnB,CAAC","sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nimport { resetButtonFocusInner, resetButtonRule } from '../../lib/styles/Mixins.js';\nimport { t } from '../../lib/theming/vanilla.js';\n\n// цвет из resetButtonRule уходит запасным значением к своему: Emotion ставил повтор на место последнего вхождения\nconst { color: resetColor, ...resetButtonWithoutColor } = resetButtonRule;\n\nexport const root = style({\n  ...resetButtonWithoutColor,\n  color: [resetColor, t.clearCrossIconColor],\n  cursor: 'pointer',\n  transition: `color ${t.transitionDuration} ${t.transitionTimingFunction}`,\n  display: 'flex',\n  justifyContent: t.clearCrossIconAlign,\n  alignItems: 'center',\n  position: 'absolute',\n  right: `calc(-1 * ${t.inputBorderWidth})`,\n  top: `calc(-1 * ${t.inputBorderWidth})`,\n});\n\nexport const focus = style({ color: t.clearCrossIconHoverColor });\n\nexport const clearCrossSmall = style({\n  width: t.clearCrossIconWidthSmall,\n  height: t.clearCrossIconHeightSmall,\n  borderRadius: t.clearCrossIconBorderRadiusSmall,\n});\n\nexport const clearCrossMedium = style({\n  width: t.clearCrossIconWidthMedium,\n  height: t.clearCrossIconHeightMedium,\n  borderRadius: t.clearCrossIconBorderRadiusMedium,\n});\n\nexport const clearCrossLarge = style({\n  width: t.clearCrossIconWidthLarge,\n  height: t.clearCrossIconHeightLarge,\n  borderRadius: t.clearCrossIconBorderRadiusLarge,\n});\n\nexport const relativeWidthSmall = style({ display: 'inline-block', width: t.inputIconSizeSmall });\n\nexport const relativeWidthMedium = style({ display: 'inline-block', width: t.inputIconSizeMedium });\n\nexport const relativeWidthLarge = style({ display: 'inline-block', width: t.inputIconSizeLarge });\n\n// вложенные правила — после баз всех классов файла, как было в склеенном CSS Emotion\nresetButtonFocusInner(root);\nglobalStyle(`${root}:hover`, { color: t.clearCrossIconHoverColor });\n\nexport const styles = {\n  root,\n  focus,\n  clearCrossSmall,\n  clearCrossMedium,\n  clearCrossLarge,\n  relativeWidthSmall,\n  relativeWidthMedium,\n  relativeWidthLarge,\n};\n"]}

package/internal/ClearCrossIcon/ClearCrossIcon.js

@@ -21,28 +21,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import { cx } from '../../lib/cx.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
-import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { useGlobal } from '../../lib/renderEnvironment/index.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
-import { getStyles } from './ClearCrossIcon.styles.js';
+import { styles } from './ClearCrossIcon.css.js';
 import { CrossIcon } from './CrossIcon.js';
 export var ClearCrossIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'small' : _b, style = _a.style, dataTid = _a["data-tid"], rest = __rest(_a, ["size", "style", 'data-tid']);
     var globalObject = useGlobal();
-    var cx = useEmotion().cx;
-    var styles = useStyles(getStyles);
-    var theme = React.useContext(ThemeContext);
     var keyListener = useKeyListener();
     var getSizeClassNames = function (size) {
         switch (size) {
             case 'large':
-                return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };
+                return { button: styles.clearCrossLarge, span: styles.relativeWidthLarge };
             case 'medium':
-                return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };
+                return { button: styles.clearCrossMedium, span: styles.relativeWidthMedium };
             case 'small':
             default:
-                return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };
+                return { button: styles.clearCrossSmall, span: styles.relativeWidthSmall };
         }
     };
     var _c = React.useState(false), focusedByTab = _c[0], setFocusedByTab = _c[1];
@@ -58,9 +55,9 @@ export var ClearCrossIcon = function (_a) {
     var handleBlur = function () { return setFocusedByTab(false); };
     return (React.createElement(CommonWrapper, __assign({}, rest),
         React.createElement("span", { className: getSizeClassNames(size).span },
-            React.createElement("button", __assign({ "data-tid": dataTid, type: "button", tabIndex: -1, className: cx(styles.root(theme), 
+            React.createElement("button", __assign({ "data-tid": dataTid, type: "button", tabIndex: -1, className: cx(styles.root, 
                 // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
-                focusedByTab && styles.focus(theme), getSizeClassNames(size).button), style: style, onFocus: handleFocus, onBlur: handleBlur }, rest),
+                focusedByTab && styles.focus, getSizeClassNames(size).button), style: style, onFocus: handleFocus, onBlur: handleBlur }, rest),
                 React.createElement(CrossIcon, { size: size, focusable: true })))));
 };
 ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';

package/internal/ClearCrossIcon/ClearCrossIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["ClearCrossIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { TokenSize } from '../../components/Token/index.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { getStyles } from './ClearCrossIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = React.useContext(ThemeContext);\n  const keyListener = useKeyListener();\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root(theme),\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus(theme),\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"]}
+{"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["ClearCrossIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAU3C,MAAM,CAAC,IAAM,cAAc,GAAiD,UAAC,EAK5E;IAJC,IAAA,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,KAAK,WAAA,EACO,OAAO,iBAAA,EAChB,IAAI,cAJoE,6BAK5E,CADQ;IAEP,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,iBAAiB,GAAG,UAAC,IAAe;QACxC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,IAAI,EAAE,MAAM,CAAC,kBAAkB,EAAE,CAAC;YAC7E,KAAK,QAAQ;gBACX,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,gBAAgB,EAAE,IAAI,EAAE,MAAM,CAAC,mBAAmB,EAAE,CAAC;YAC/E,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,IAAI,EAAE,MAAM,CAAC,kBAAkB,EAAE,CAAC;QAC/E,CAAC;IACH,CAAC,CAAC;IAEI,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAA/D,YAAY,QAAA,EAAE,eAAe,QAAkC,CAAC;IAEvE,IAAM,WAAW,GAAG;;QAClB,4FAA4F;QAC5F,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,IAAM,UAAU,GAAG,cAAM,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,CAAC;IAEhD,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI;QACrB,8BAAM,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI;YAC3C,qDACY,OAAO,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI;gBACX,qHAAqH;gBACrH,YAAY,IAAI,MAAM,CAAC,KAAK,EAC5B,iBAAiB,CAAC,IAAI,CAAC,CAAC,MAAM,CAC/B,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,IACd,IAAI;gBAER,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,SAAG,CAC5B,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,mBAAmB,GAAG,gBAAgB,CAAC;AACtD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { TokenSize } from '../../components/Token/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useGlobal } from '../../lib/renderEnvironment/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { styles } from './ClearCrossIcon.css.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const keyListener = useKeyListener();\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge, span: styles.relativeWidthLarge };\n      case 'medium':\n        return { button: styles.clearCrossMedium, span: styles.relativeWidthMedium };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall, span: styles.relativeWidthSmall };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root,\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus,\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.css.d.ts

@@ -0,0 +1,14 @@
+export declare const root: string;
+export declare const inheritColor: string;
+export declare const inheritHoverColor: string;
+export declare const rootDisabled: string;
+export declare const focus: string;
+export declare const wrapper: string;
+export declare const styles: {
+    root: string;
+    inheritColor: string;
+    inheritHoverColor: string;
+    rootDisabled: string;
+    focus: string;
+    wrapper: string;
+};

package/internal/CloseButtonIcon/CloseButtonIcon.css.js

@@ -0,0 +1,8 @@
+
+export var focus = 'react-ui-CloseButtonIcon__focus';
+export var inheritColor = 'react-ui-CloseButtonIcon__inheritColor';
+export var inheritHoverColor = 'react-ui-CloseButtonIcon__inheritHoverColor';
+export var root = 'react-ui-CloseButtonIcon__root';
+export var rootDisabled = 'react-ui-CloseButtonIcon__rootDisabled';
+export var styles = {root:'react-ui-CloseButtonIcon__root',inheritColor:'react-ui-CloseButtonIcon__inheritColor',inheritHoverColor:'react-ui-CloseButtonIcon__inheritHoverColor',rootDisabled:'react-ui-CloseButtonIcon__rootDisabled',focus:'react-ui-CloseButtonIcon__focus',wrapper:'react-ui-CloseButtonIcon__wrapper'};
+export var wrapper = 'react-ui-CloseButtonIcon__wrapper';

package/internal/CloseButtonIcon/CloseButtonIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButtonIcon.css.js","sourceRoot":"","sources":["CloseButtonIcon.css.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAEjD,kHAAkH;AAC1G,IAAO,UAAU,GAAiC,eAAe,MAAhD,EAAK,uBAAuB,UAAK,eAAe,EAAnE,SAAiD,CAAF,CAAqB;AAE1E,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,uBACpB,uBAAuB,KAC1B,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,UAAU,EACpB,YAAY,EAAE,CAAC,CAAC,wBAAwB,EACxC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC,iBAAiB,CAAC,EACxC,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,gBAAS,CAAC,CAAC,kBAAkB,cAAI,CAAC,CAAC,wBAAwB,CAAE,IACzE,CAAC;AAEH,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAExD,MAAM,CAAC,IAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,yBAAyB,EAAE,CAAC,CAAC;AAE1E,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,uBAAuB,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,IAAM,OAAO,GAAG,KAAK,CAAC;IAC3B,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,aAAa,EAAE,MAAM;CACtB,CAAC,CAAC;AAEH,qFAAqF;AACrF,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAC5B,WAAW,CAAC,UAAG,IAAI,6BAAmB,IAAI,mBAAgB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC;AACjG,WAAW,CAAC,UAAG,iBAAiB,6BAAmB,iBAAiB,mBAAgB,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAE5G,MAAM,CAAC,IAAM,MAAM,GAAG,EAAE,IAAI,MAAA,EAAE,YAAY,cAAA,EAAE,iBAAiB,mBAAA,EAAE,YAAY,cAAA,EAAE,KAAK,OAAA,EAAE,OAAO,SAAA,EAAE,CAAC","sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nimport { resetButtonFocusInner, resetButtonRule } from '../../lib/styles/Mixins.js';\nimport { t } from '../../lib/theming/vanilla.js';\n\n// цвет из resetButtonRule уходит запасным значением к своему: Emotion ставил повтор на место последнего вхождения\nconst { color: resetColor, ...resetButtonWithoutColor } = resetButtonRule;\n\nexport const root = style({\n  ...resetButtonWithoutColor,\n  display: 'inline-block',\n  position: 'relative',\n  borderRadius: t.closeBtnIconBorderRadius,\n  color: [resetColor, t.closeBtnIconColor],\n  cursor: 'pointer',\n  transition: `color ${t.transitionDuration} ${t.transitionTimingFunction}`,\n});\n\nexport const inheritColor = style({ color: 'inherit' });\n\nexport const inheritHoverColor = style({});\n\nexport const rootDisabled = style({ color: t.closeBtnIconDisabledColor });\n\nexport const focus = style({ boxShadow: t.closeBtnIconFocusShadow });\n\nexport const wrapper = style({\n  boxSizing: 'content-box',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  alignItems: 'center',\n  justifyContent: 'center',\n  pointerEvents: 'none',\n});\n\n// вложенные правила — после баз всех классов файла, как было в склеенном CSS Emotion\nresetButtonFocusInner(root);\nglobalStyle(`${root}:enabled:focus, ${root}:enabled:hover`, { color: t.closeBtnIconHoverColor });\nglobalStyle(`${inheritHoverColor}:enabled:focus, ${inheritHoverColor}:enabled:hover`, { color: 'inherit' });\n\nexport const styles = { root, inheritColor, inheritHoverColor, rootDisabled, focus, wrapper };\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.js

@@ -21,24 +21,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import { cx } from '../../lib/cx.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
-import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { useGlobal } from '../../lib/renderEnvironment/index.js';
+import { themeVarName } from '../../lib/theming/themeVars.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
 import { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';
-import { getStyles } from './CloseButtonIcon.styles.js';
+import { styles } from './CloseButtonIcon.css.js';
 import { CrossIcon } from './CrossIcon.js';
 export var CloseButtonIcon = function (_a) {
     var _b = _a.side, side = _b === void 0 ? DEFAULT_ICON_SIZE : _b, _c = _a.size, size = _c === void 0 ? DEFAULT_ICON_SIZE : _c, color = _a.color, colorHover = _a.colorHover, _d = _a.tabbable, tabbable = _d === void 0 ? true : _d, style = _a.style, rest = __rest(_a, ["side", "size", "color", "colorHover", "tabbable", "style"]);
     var globalObject = useGlobal();
-    var cx = useEmotion().cx;
-    var styles = useStyles(getStyles);
-    var _theme = React.useContext(ThemeContext);
-    var theme = ThemeFactory.create({
-        closeBtnIconColor: color !== null && color !== void 0 ? color : _theme.closeBtnIconColor,
-        closeBtnIconHoverColor: colorHover !== null && colorHover !== void 0 ? colorHover : _theme.closeBtnIconHoverColor,
-    }, _theme);
+    // значения темы зашиты в CSS как var(--k-*), поэтому переопределение цвета передаём переменными
+    // (`inherit` внутри var() не работает, для него есть отдельные классы)
+    var colorVars = {};
+    if (color && color !== 'inherit') {
+        colorVars[themeVarName('closeBtnIconColor')] = color;
+    }
+    if (colorHover && colorHover !== 'inherit') {
+        colorVars[themeVarName('closeBtnIconHoverColor')] = colorHover;
+    }
     var keyListener = useKeyListener();
     var _e = React.useState(false), focusedByTab = _e[0], setFocusedByTab = _e[1];
     var handleFocus = function () {
@@ -54,8 +56,8 @@ export var CloseButtonIcon = function (_a) {
     var handleBlur = function () { return setFocusedByTab(false); };
     var tabIndex = !tabbable || rest.disabled ? -1 : 0;
     return (React.createElement(CommonWrapper, __assign({}, rest),
-        React.createElement("button", __assign({ tabIndex: tabIndex, className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)), style: __assign({ width: side, height: side }, style), onFocus: handleFocus, onBlur: handleBlur }, rest),
-            React.createElement("span", { className: styles.wrapper() },
+        React.createElement("button", __assign({ tabIndex: tabIndex, className: cx(styles.root, color === 'inherit' && styles.inheritColor, colorHover === 'inherit' && styles.inheritHoverColor, !rest.disabled && focusedByTab && styles.focus, rest.disabled && styles.rootDisabled), style: __assign(__assign({ width: side, height: side }, colorVars), style), onFocus: handleFocus, onBlur: handleBlur }, rest),
+            React.createElement("span", { className: styles.wrapper },
                 React.createElement(CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })))));
 };
 CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';

package/internal/CloseButtonIcon/CloseButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["CloseButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { getStyles } from './CloseButtonIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ width: side, height: side, ...style }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}
+{"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["CloseButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { cx } from '../../lib/cx.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useGlobal } from '../../lib/renderEnvironment/index.js';\nimport { themeVarName } from '../../lib/theming/themeVars.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { styles } from './CloseButtonIcon.css.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  // значения темы зашиты в CSS как var(--k-*), поэтому переопределение цвета передаём переменными\n  // (`inherit` внутри var() не работает, для него есть отдельные классы)\n  const colorVars: Record<string, string> = {};\n  if (color && color !== 'inherit') {\n    colorVars[themeVarName('closeBtnIconColor')] = color;\n  }\n  if (colorHover && colorHover !== 'inherit') {\n    colorVars[themeVarName('closeBtnIconHoverColor')] = colorHover;\n  }\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root,\n          color === 'inherit' && styles.inheritColor,\n          colorHover === 'inherit' && styles.inheritHoverColor,\n          !rest.disabled && focusedByTab && styles.focus,\n          rest.disabled && styles.rootDisabled,\n        )}\n        style={{ width: side, height: side, ...colorVars, ...style }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}

package/internal/CommonWrapper/CommonWrapper.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { Theme } from '../../lib/theming/Theme.js';
 import type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';
 export type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;
 export declare class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<CommonWrapperProps<P> & CommonPropsRootNodeRef> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
-    private cx;
+    static contextType: React.Context<Readonly<typeof import("../themes/BasicTheme.js").BasicThemeClass>>;
+    context: Theme;
+    private carrierTheme;
     private child;
     getRootNode: TGetRootNode;
     private setRootNode;
     private rootNodeSubscription;
-    render(): React.ReactNode;
+    render(): React.JSX.Element;
+    private isHostChild;
     private ref;
 }

package/internal/CommonWrapper/CommonWrapper.js

@@ -44,9 +44,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import warning from 'warning';
 import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
+import { cx } from '../../lib/cx.js';
 import { getElementRef } from '../../lib/getElementRef.js';
-import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getServerThemeVarsAttr, getThemeSetTokens, getThemeVars, omitThemeVars, ThemeCarrierContext, } from '../../lib/theming/themeVars.js';
 import { isFunction, isRefableElement } from '../../lib/utils.js';
 import { extractCommonProps } from './utils/extractCommonProps.js';
 import { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';
@@ -54,6 +56,7 @@ var CommonWrapper = /** @class */ (function (_super) {
     __extends(CommonWrapper, _super);
     function CommonWrapper() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.carrierTheme = null;
         _this.rootNodeSubscription = null;
         _this.ref = function (instance) {
             var _a, _b, _c, _d;
@@ -88,20 +91,39 @@ var CommonWrapper = /** @class */ (function (_super) {
         var getChildProps = function (child) {
             var childProps = __assign(__assign({}, getCommonVisualStateDataAttributes(rest)), dataProps);
             isRefableElement(child) && (childProps.ref = _this.ref);
-            var classNames = _this.cx(child.props.className, className);
+            var classNames = cx(child.props.className, className);
             classNames && (childProps.className = classNames);
-            var styles = __assign(__assign({}, child.props.style), style);
+            var isUnderSameCarrier = _this.carrierTheme !== null && _this.carrierTheme === _this.context;
+            var setTokens = isUnderSameCarrier ? '' : getThemeSetTokens(_this.context);
+            var vars = isUnderSameCarrier ? {} : getThemeVars(_this.context, _this.carrierTheme);
+            // носитель без пустых токенов всё равно с атрибутом: на нём обрывается @scope внешней темы (whenThemeSets)
+            (setTokens || Object.keys(vars).length) && (childProps['data-k-set'] = setTokens);
+            // без своих стилей отдаём объект из кеша как есть: та же ссылка — React не сверяет сотни переменных.
+            // переменные темы из props.style выбрасываем: их поставил внешний носитель, а vars уже содержат
+            // и свои значения, и сброс чужих (иначе вложенная тема не вернула бы токен к значению по умолчанию)
+            var own = omitThemeVars(style);
+            var styles = child.props.style || style ? __assign(__assign(__assign({}, vars), child.props.style), own) : vars;
             Object.keys(styles).length && (childProps.style = styles);
+            var varsAttr = getServerThemeVarsAttr(vars);
+            varsAttr && (childProps['data-k-vars'] = varsAttr);
             return childProps;
         };
-        return React.isValidElement(this.child)
-            ? React.cloneElement(this.child, getChildProps(this.child))
-            : this.child;
+        return (React.createElement(ThemeCarrierContext.Consumer, null, function (carrierTheme) {
+            _this.carrierTheme = carrierTheme;
+            return (
+            // носителем считаемся, только если переменные легли на DOM-узел: компонент может не донести style
+            React.createElement(ThemeCarrierContext.Provider, { value: _this.isHostChild() ? _this.context : carrierTheme }, React.isValidElement(_this.child)
+                ? React.cloneElement(_this.child, getChildProps(_this.child))
+                : _this.child));
+        }));
+    };
+    CommonWrapper.prototype.isHostChild = function () {
+        return React.isValidElement(this.child) && typeof this.child.type === 'string';
     };
     CommonWrapper.__KONTUR_REACT_UI__ = 'CommonWrapper';
     CommonWrapper.displayName = 'CommonWrapper';
+    CommonWrapper.contextType = ThemeContext;
     CommonWrapper = __decorate([
-        withRenderEnvironment,
         rootNode
     ], CommonWrapper);
     return CommonWrapper;

package/internal/CommonWrapper/CommonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonWrapper.js","sourceRoot":"","sources":["CommonWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { getElementRef } from '../../lib/getElementRef.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { isFunction, isRefableElement } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';\nimport { extractCommonProps } from './utils/extractCommonProps.js';\nimport { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@withRenderEnvironment\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n  public static displayName = 'CommonWrapper';\n\n  private cx!: Emotion['cx'];\n  private child: React.ReactNode;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n  render() {\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n\n    // TODO: replace count with only in 7.0\n    if (React.Children.count(this.child) > 1) {\n      warning(false, 'CommonWrapper expects a single child');\n    }\n\n    const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n      const childProps: Record<string, unknown> = {\n        ...getCommonVisualStateDataAttributes(rest),\n        ...dataProps,\n      };\n\n      isRefableElement(child) && (childProps.ref = this.ref);\n\n      const classNames: string = this.cx(child.props.className, className);\n      classNames && (childProps.className = classNames);\n\n      const styles: React.CSSProperties = { ...child.props.style, ...style };\n      Object.keys(styles).length && (childProps.style = styles);\n\n      return childProps;\n    };\n\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, getChildProps(this.child))\n      : this.child;\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change,\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = getElementRef(this.child as React.ReactElement);\n    if (typeof originalRef === 'function' || (originalRef && typeof originalRef === 'object')) {\n      originalRef && callChildRef(originalRef, instance);\n    }\n  };\n}\n"]}
+{"version":3,"file":"CommonWrapper.js","sourceRoot":"","sources":["CommonWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport warning from 'warning';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { cx } from '../../lib/cx.js';\nimport { getElementRef } from '../../lib/getElementRef.js';\nimport type { TGetRootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport {\n  getServerThemeVarsAttr,\n  getThemeSetTokens,\n  getThemeVars,\n  omitThemeVars,\n  ThemeCarrierContext,\n} from '../../lib/theming/themeVars.js';\nimport { isFunction, isRefableElement } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';\nimport { extractCommonProps } from './utils/extractCommonProps.js';\nimport { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n  public static displayName = 'CommonWrapper';\n  public static contextType = ThemeContext;\n  public context!: Theme;\n  private carrierTheme: Theme | null = null;\n\n  private child: React.ReactNode;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n  render() {\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n\n    // TODO: replace count with only in 7.0\n    if (React.Children.count(this.child) > 1) {\n      warning(false, 'CommonWrapper expects a single child');\n    }\n\n    const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n      const childProps: Record<string, unknown> = {\n        ...getCommonVisualStateDataAttributes(rest),\n        ...dataProps,\n      };\n\n      isRefableElement(child) && (childProps.ref = this.ref);\n\n      const classNames: string = cx(child.props.className, className);\n      classNames && (childProps.className = classNames);\n\n      const isUnderSameCarrier = this.carrierTheme !== null && this.carrierTheme === this.context;\n      const setTokens = isUnderSameCarrier ? '' : getThemeSetTokens(this.context);\n      const vars = isUnderSameCarrier ? {} : getThemeVars(this.context, this.carrierTheme);\n      // носитель без пустых токенов всё равно с атрибутом: на нём обрывается @scope внешней темы (whenThemeSets)\n      (setTokens || Object.keys(vars).length) && (childProps['data-k-set'] = setTokens);\n\n      // без своих стилей отдаём объект из кеша как есть: та же ссылка — React не сверяет сотни переменных.\n      // переменные темы из props.style выбрасываем: их поставил внешний носитель, а vars уже содержат\n      // и свои значения, и сброс чужих (иначе вложенная тема не вернула бы токен к значению по умолчанию)\n      const own = omitThemeVars(style);\n      const styles: React.CSSProperties = child.props.style || style ? { ...vars, ...child.props.style, ...own } : vars;\n      Object.keys(styles).length && (childProps.style = styles);\n      const varsAttr = getServerThemeVarsAttr(vars);\n      varsAttr && (childProps['data-k-vars'] = varsAttr);\n\n      return childProps;\n    };\n\n    return (\n      <ThemeCarrierContext.Consumer>\n        {(carrierTheme) => {\n          this.carrierTheme = carrierTheme;\n          return (\n            // носителем считаемся, только если переменные легли на DOM-узел: компонент может не донести style\n            <ThemeCarrierContext.Provider value={this.isHostChild() ? this.context : carrierTheme}>\n              {React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n                ? React.cloneElement(this.child, getChildProps(this.child))\n                : this.child}\n            </ThemeCarrierContext.Provider>\n          );\n        }}\n      </ThemeCarrierContext.Consumer>\n    );\n  }\n\n  private isHostChild() {\n    return React.isValidElement(this.child) && typeof this.child.type === 'string';\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change,\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = getElementRef(this.child as React.ReactElement);\n    if (typeof originalRef === 'function' || (originalRef && typeof originalRef === 'object')) {\n      originalRef && callChildRef(originalRef, instance);\n    }\n  };\n}\n"]}

package/internal/CustomComboBox/ComboBoxView.d.ts

@@ -100,10 +100,6 @@ export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T
     private mobileInput;
     private isMobileLayout;
     private dropdownContainerRef;
-    private styles;
-    private maskedInputStyles;
-    private emotion;
-    private cx;
     private theme;
     private size;
     private menuId;

package/internal/CustomComboBox/ComboBoxView.js

@@ -33,12 +33,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import React from 'react';
 import { Input } from '../../components/Input/index.js';
 import { MaskedInput } from '../../components/MaskedInput/index.js';
-import { getStyles as getMaskedInputStyles } from '../../components/MaskedInput/MaskedInput.styles.js';
+import { styles as maskedInputStyles } from '../../components/MaskedInput/MaskedInput.css.js';
 import { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';
 import { Spinner } from '../../components/Spinner/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { cx } from '../../lib/cx.js';
 import { getMenuPositions } from '../../lib/getMenuPositions.js';
-import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
@@ -54,8 +54,8 @@ import { RenderLayer } from '../RenderLayer/index.js';
 import { ZIndex } from '../ZIndex/index.js';
 import { ArrowDownIcon } from './ArrowDownIcon.js';
 import { ComboBoxMenu } from './ComboBoxMenu.js';
+import { styles } from './CustomComboBox.css.js';
 import { CustomComboBoxDataTids } from './CustomComboBox.js';
-import { getStyles } from './CustomComboBox.styles.js';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes.js';
 import { getComboBoxTheme } from './getComboBoxTheme.js';
 export var ComboBoxViewIds = {
@@ -141,7 +141,7 @@ var ComboBoxView = /** @class */ (function (_super) {
             }
             _this.input = input;
         };
-        _this.renderSpinner = function () { return (React.createElement("span", { className: _this.styles.spinnerWrapper() },
+        _this.renderSpinner = function () { return (React.createElement("span", { className: styles.spinnerWrapper },
             React.createElement(Spinner, { size: "small", caption: "", dimmed: true }))); };
         _this.getRightIcon = function () {
             var _a = _this.props, loading = _a.loading, items = _a.items, drawArrow = _a.drawArrow, rightIcon = _a.rightIcon;
@@ -189,8 +189,6 @@ var ComboBoxView = /** @class */ (function (_super) {
     };
     ComboBoxView.prototype.render = function () {
         var _this = this;
-        this.styles = getStyles(this.emotion);
-        this.maskedInputStyles = getMaskedInputStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = getComboBoxTheme(theme);
             return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
@@ -203,7 +201,7 @@ var ComboBoxView = /** @class */ (function (_super) {
         var input = this.renderInput();
         return (React.createElement(CommonWrapper, __assign({}, this.props),
             React.createElement(RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened },
-                React.createElement("span", { "data-tid": CustomComboBoxDataTids.comboBoxView, style: { width: width }, className: this.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, ref: this.setRootNode },
+                React.createElement("span", { "data-tid": CustomComboBoxDataTids.comboBoxView, style: { width: width }, className: styles.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, ref: this.setRootNode },
                     input,
                     isMobile ? this.renderMobileMenu() : this.renderMenu()))));
     };
@@ -257,7 +255,7 @@ var ComboBoxView = /** @class */ (function (_super) {
             return React.createElement(Input, __assign({}, inputProps));
         }
         var renderValue = this.getProps().renderValue;
-        return (React.createElement(InputLikeText, { id: id, align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: this.size, width: "100%", ref: refInputLikeText, "aria-describedby": ariaDescribedby, "aria-controls": this.menuId, showClearIcon: showClearIcon, className: this.cx(mask && this.maskedInputStyles.root(this.theme)), onClearCrossClick: this.props.onClearCrossClick }, isNonNullable(value) && renderValue ? renderValue(value) : null));
+        return (React.createElement(InputLikeText, { id: id, align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: this.size, width: "100%", ref: refInputLikeText, "aria-describedby": ariaDescribedby, "aria-controls": this.menuId, showClearIcon: showClearIcon, className: cx(mask && maskedInputStyles.root), onClearCrossClick: this.props.onClearCrossClick }, isNonNullable(value) && renderValue ? renderValue(value) : null));
     };
     var ComboBoxView_1;
     ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView';
@@ -278,7 +276,6 @@ var ComboBoxView = /** @class */ (function (_super) {
         showClearIcon: 'never',
     };
     ComboBoxView = ComboBoxView_1 = __decorate([
-        withRenderEnvironment,
         responsiveLayout,
         rootNode,
         withSize