@sima-land/ui-nucleons 42.0.0 → 43.0.0

package/plate/index.js

@@ -45,5 +45,5 @@ const classnames_1 = __importDefault(require("classnames"));
  */
 exports.Plate = (0, react_1.forwardRef)(function Plate(_a, ref) {
     var { className, children, rounds = 's', shadow = 'z1', 'data-testid': testId = 'plate' } = _a, restProps = __rest(_a, ["className", "children", "rounds", "shadow", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)((0, colors_1.bgColor)('white'), className, shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)((0, colors_1.bgColor)('basic-white'), className, shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
 });

package/price/price.module.scss

@@ -5,7 +5,7 @@
   display: inline-block;
   white-space: nowrap;
   &.crossed-out {
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
     text-decoration: line-through;
   }
 }

package/rating/rating.module.scss

@@ -30,7 +30,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  fill: colors.$gray12;
+  fill: colors.$basic-gray12;
   &.half {
     width: 50%;
     fill: colors.$additional-amber;

package/select/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextFieldProps } from '../text-field';
 declare type Size = 's' | 'm' | 'l' | 'xl';
-export interface SelectProps extends Omit<TextFieldProps, 'style'> {
+export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
     /** Нужно ли выводить состояние загрузки списка. */
     loading?: boolean;
     /** Сработает при открытии/закрытии меню. */
@@ -16,11 +16,18 @@ export interface SelectProps extends Omit<TextFieldProps, 'style'> {
     renderOption?: (option: any) => React.ReactNode;
     /** Стили. */
     style?: React.CSSProperties;
+    endAdornment?: TextFieldProps['endAdornment'] | ((opened: boolean) => React.ReactNode);
 }
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+export declare const renderDefaultArrow: (opened: boolean) => JSX.Element;
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, ...restProps }: SelectProps) => JSX.Element;
+export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, endAdornment, ...restProps }: SelectProps) => JSX.Element;
 export {};

package/select/index.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.Select = exports.renderDefaultArrow = void 0;
 const react_1 = __importStar(require("react"));
 const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
@@ -47,18 +47,27 @@ const colors_1 = require("../colors");
 const dropdown_loading_1 = require("../_internal/dropdown-loading");
 const hooks_1 = require("../hooks");
 const cx = bind_1.default.bind(select_module_scss_1.default);
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+const renderDefaultArrow = (opened) => {
+    const ArrowSVG = opened ? up_1.default : down_1.default;
+    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray38') });
+};
+exports.renderDefaultArrow = renderDefaultArrow;
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
 const Select = (_a) => {
-    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId, size } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size"]);
+    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId, size, endAdornment = exports.renderDefaultArrow } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size", "endAdornment"]);
     const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [opened, toggleMenu] = (0, react_1.useState)(false);
-    const ArrowSVG = opened ? up_1.default : down_1.default;
     (0, react_1.useEffect)(() => {
         opened && menuRef.current && menuRef.current.focus();
         onMenuToggle && onMenuToggle(opened);
@@ -74,15 +83,14 @@ const Select = (_a) => {
                 onKeyDown: e => {
                     e.key === 'Enter' && toggleMenu(true);
                 },
-                onClick: e => {
-                    e.preventDefault();
-                    onClick && onClick(e);
-                },
+            }, onClick: e => {
+                e.preventDefault();
+                onClick && onClick(e);
             }, className: select_module_scss_1.default.field, "data-testid": 'select:field', label: label, focused: opened, baseInputProps: {
                 // чтобы не ловить фокус на поле
                 style: { pointerEvents: 'none' },
                 tabIndex: -1,
-            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) })),
+            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: typeof endAdornment === 'function' ? endAdornment(opened) : endAdornment })),
         opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
                 if (event.key === 'Enter') {
                     toggleMenu(false);

package/spinner/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-declare type Color = 'brand-blue' | 'white';
+import { Token } from '../colors';
+declare type SpinnerColor = Extract<Token, 'basic-blue' | 'basic-white'>;
 declare type Size = 'small' | 'medium' | 'large';
 export interface SpinnerProps {
     /** Размер. */
     size?: Size;
     /** Цвет. */
-    color?: Color;
+    color?: SpinnerColor;
     /** Класс. */
     className?: string;
     /** Стили. */

package/spinner/index.js

@@ -15,8 +15,8 @@ exports.DIAMETERS = {
     medium: 48,
     large: 80,
 };
-const DEFAULT_COLOR = 'brand-blue';
-const AVAILABLE_COLORS = ['brand-blue', 'white'];
+const DEFAULT_COLOR = 'basic-blue';
+const AVAILABLE_COLORS = ['basic-blue', 'basic-white'];
 /**
  * Компонент спиннера.
  * @param props Свойства.

package/spinner/spinner.module.scss

@@ -11,6 +11,7 @@ $durations: (
 );
 
 .spinner {
+  display: block;
   .circle {
     fill: none;
     stroke-width: 2;

package/stepper/stepper.module.scss

@@ -3,23 +3,23 @@
 .root {
   display: flex;
   align-items: center;
-  border: 1px solid colors.$gray12;
+  border: 1px solid colors.$basic-gray12;
   border-radius: 4px;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   background: #fff;
   &.focused:not(.disabled) {
-    border-color: colors.$brand-blue;
+    border-color: colors.$basic-blue;
   }
   &.disabled {
-    color: colors.$gray24;
-    border-color: colors.$gray12;
+    color: colors.$basic-gray24;
+    border-color: colors.$basic-gray12;
     .button {
-      fill: colors.$gray12;
+      fill: colors.$basic-gray12;
     }
   }
   &.readonly {
     .button {
-      fill: colors.$gray24;
+      fill: colors.$basic-gray24;
     }
   }
   &.failed:not(.disabled):not(.focused) {
@@ -56,7 +56,7 @@
 }
 
 .button {
-  fill: colors.$gray38;
+  fill: colors.$basic-gray38;
   flex-shrink: 0;
   &:not(.hidden) {
     cursor: pointer;

package/stroked-svg/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 export interface StrokedSVGProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Компонент, выводящий svg-элемент. */
     component: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
-    /** Ширина внешней обводки. */
-    stroke?: string;
     /** Цвет внешней обводки. */
+    stroke?: string;
+    /** Ширина внешней обводки. */
     strokeWidth?: number;
     /** Цвет заливки. */
     fill?: string;

package/stroked-svg/index.js

@@ -44,7 +44,7 @@ const index_module_scss_1 = __importDefault(require("./index.module.scss"));
  * @return Элемент.
  */
 exports.StrokedSVG = (0, react_1.forwardRef)((_a, ref) => {
-    var { component: Tag, fill, stroke = colors_1.COLORS.get('gray4'), strokeWidth = 1, className } = _a, restProps = __rest(_a, ["component", "fill", "stroke", "strokeWidth", "className"]);
+    var { component: Tag, fill, stroke = colors_1.COLORS.get('basic-gray4'), strokeWidth = 1, className } = _a, restProps = __rest(_a, ["component", "fill", "stroke", "strokeWidth", "className"]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(index_module_scss_1.default.root, className) }, restProps),
         react_1.default.createElement(Tag, { stroke: stroke, strokeWidth: `${strokeWidth * 2}px`, className: index_module_scss_1.default.stroke }),
         react_1.default.createElement(Tag, { fill: fill, className: index_module_scss_1.default.svg })));

package/styling/borders.module.scss

@@ -1,13 +1,13 @@
 @use '../colors';
 
 .inner-border-top {
-  box-shadow: inset 0 1px 0 colors.$gray12;
+  box-shadow: inset 0 1px 0 colors.$basic-gray12;
 }
 
 .inner-border-bottom {
-  box-shadow: inset 0 -1px 0 colors.$gray12;
+  box-shadow: inset 0 -1px 0 colors.$basic-gray12;
 }
 
 .inner-border-y {
-  box-shadow: inset 0 1px 0 colors.$gray12, inset 0 -1px 0 colors.$gray12;
+  box-shadow: inset 0 1px 0 colors.$basic-gray12, inset 0 -1px 0 colors.$basic-gray12;
 }

package/styling/colors.d.ts

@@ -1,5 +1,5 @@
-export declare const color: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const hoverColor: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const bgColor: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const stroke: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const fill: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
+export declare const color: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const hoverColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const bgColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const stroke: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const fill: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;

package/tabs/tabs.module.scss

@@ -26,10 +26,10 @@
   &.view-clean-underline {
     height: 32px;
     .item {
-      color: colors.$gray38;
+      color: colors.$basic-gray38;
       &.selected {
         position: relative;
-        color: colors.$gray87;
+        color: colors.$basic-gray87;
         &::before {
           content: '';
           position: absolute;
@@ -38,17 +38,17 @@
           left: 0;
           right: 0;
           bottom: 0;
-          background-color: colors.$brand-blue;
+          background-color: colors.$basic-blue;
           border-top-left-radius: 4px;
           border-top-right-radius: 4px;
         }
       }
       &.disabled {
-        color: colors.$gray12;
+        color: colors.$basic-gray12;
       }
       &:not(.selected):not(.disabled):hover {
         cursor: pointer;
-        color: colors.$gray54;
+        color: colors.$basic-gray54;
       }
     }
   }
@@ -61,26 +61,26 @@
       content: '';
       height: 1px;
       width: 100%;
-      background-color: colors.$gray12;
+      background-color: colors.$basic-gray12;
     }
   }
   &.view-round {
     height: 40px;
     .item {
-      color: colors.$gray87;
+      color: colors.$basic-gray87;
       padding: 8px 16px;
       border-radius: 4px;
-      background-color: colors.$gray4;
+      background-color: colors.$basic-gray4;
       &.selected {
-        background-color: colors.$brand-blue;
-        color: colors.$white;
+        background-color: colors.$basic-blue;
+        color: colors.$basic-white;
       }
       &.disabled {
-        color: colors.$gray24;
+        color: colors.$basic-gray24;
       }
       &:not(.selected):not(.disabled):hover {
         cursor: pointer;
-        background-color: colors.$gray8;
+        background-color: colors.$basic-gray8;
       }
     }
   }

package/text-field/index.d.ts

@@ -47,7 +47,7 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     /** Вариант отображения. */
     variant?: Variant;
     /** Свойства элемента-блока. */
-    blockProps?: React.HTMLProps<HTMLDivElement>;
+    blockProps?: Omit<React.HTMLProps<HTMLDivElement>, 'onClick'>;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/text-field/index.js

@@ -51,7 +51,7 @@ const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disab
  * @param props Свойства.
  * @return Элемент.
  */
-exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, }, ref) {
+exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, type, name, autoComplete, id, }, ref) {
     const [hasValue, toggleHasValue] = (0, react_1.useState)(isVisible(value) || isVisible(defaultValue));
     const [reallyFocused, toggleFocused] = (0, react_1.useState)(autoFocus);
     const focused = reallyFocused || Boolean(asFocused);
@@ -68,9 +68,9 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
         variant,
     });
     (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
-    (0, react_1.useEffect)(() => toggleHasValue(Boolean(baseInputRef.current.value)));
+    (0, react_1.useEffect)(() => { var _a; return toggleHasValue(Boolean((_a = baseInputRef.current) === null || _a === void 0 ? void 0 : _a.value)); });
     return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style },
-        react_1.default.createElement("div", Object.assign({ "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
+        react_1.default.createElement("div", Object.assign({}, blockProps, { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
                 const input = baseInputRef.current;
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 input &&
@@ -78,12 +78,12 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
                     !event.defaultPrevented &&
                     input !== document.activeElement &&
                     input.focus();
-            } }, blockProps),
+            } }),
             !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
             react_1.default.createElement("div", { className: cx('main-column') },
-                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label, "data-testid": 'text-field:label' })),
+                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), htmlFor: id, children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
-                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
+                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
                             onFocus && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);
@@ -91,7 +91,13 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
                             onBlur && onBlur(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(false);
-                        }, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),
+                        }, onInput: (event) => {
+                            onInput === null || onInput === void 0 ? void 0 : onInput(event);
+                            toggleHasValue(Boolean(event.target.value));
+                        }, onChange: (event) => {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                            toggleHasValue(Boolean(event.target.value));
+                        }, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),
             !multiline && Boolean(endAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginLeft: 4 }, endAdornment))),
         Boolean(caption) && (react_1.default.createElement("div", { className: cx('caption', (0, sizes_1.marginTop)(isMobile ? 1 : 2), failed && 'failed'), children: caption }))));
 });

package/text-field/text-field.module.scss

@@ -38,16 +38,16 @@ input.reset {
   // variant: desktop
   &.variant-desktop {
     background-color: #fff;
-    border: 1px solid colors.$gray12;
+    border: 1px solid colors.$basic-gray12;
     &.disabled {
-      border-color: colors.$gray12;
-      background-color: colors.$gray2;
+      border-color: colors.$basic-gray12;
+      background-color: colors.$basic-gray2;
     }
     &.focused:not(.disabled):not(.failed) {
-      border-color: colors.$brand-blue;
+      border-color: colors.$basic-blue;
     }
     &.disabled {
-      border-color: colors.$gray12;
+      border-color: colors.$basic-gray12;
     }
     &:not(.multiline) {
       &.size-xs {
@@ -79,7 +79,7 @@ input.reset {
   &.variant-mobile {
     padding: 0;
     border: 0;
-    box-shadow: inset 0 -1px colors.$gray12;
+    box-shadow: inset 0 -1px colors.$basic-gray12;
     .main-column {
       height: 100%;
       justify-content: center;
@@ -88,7 +88,7 @@ input.reset {
       justify-content: flex-start;
     }
     &.focused:not(.disabled) {
-      box-shadow: inset 0 -1px colors.$brand-blue;
+      box-shadow: inset 0 -1px colors.$basic-blue;
     }
     &.failed:not(:disabled) {
       box-shadow: inset 0 -1px colors.$additional-red;
@@ -109,9 +109,9 @@ input.reset {
   }
 
   // чтобы startAdornment/endAdornment подхватили цвет
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &.disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
 }
 
@@ -138,9 +138,9 @@ input.reset {
   transform-origin: left bottom;
   white-space: nowrap;
   overflow: hidden;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   &.disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
   &.as-placeholder {
     font-size: 16px;
@@ -154,7 +154,7 @@ input.reset {
   }
   &.variant-mobile {
     &.focused:not(.failed) {
-      color: colors.$brand-blue;
+      color: colors.$basic-blue;
     }
     &.failed.focused,
     &.failed.filled {
@@ -172,15 +172,15 @@ input.reset {
 .input-wrapper .base-input {
   font-size: 16px;
   line-height: 24px;
-  color: colors.$gray87;
-  --placeholder-color: #{colors.$gray38};
+  color: colors.$basic-gray87;
+  --placeholder-color: #{colors.$basic-gray38};
   background-color: transparent;
   width: 0;
   flex-grow: 1;
   &.disabled {
-    color: colors.$gray24;
-    --placeholder-color: #{colors.$gray24};
-    -webkit-text-fill-color: colors.$gray24; //fix safari disabled
+    color: colors.$basic-gray24;
+    --placeholder-color: #{colors.$basic-gray24};
+    -webkit-text-fill-color: colors.$basic-gray24; //fix safari disabled
   }
   &.size-xs {
     font-size: 14px;
@@ -198,7 +198,7 @@ input.reset {
 .caption {
   font-size: 12px;
   line-height: 16px;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   &.failed {
     color: colors.$additional-red;
   }

package/toggle/toggle.module.scss

@@ -12,13 +12,13 @@
 .input {
   display: none;
   &:checked + .switch {
-    background: colors.$brand-blue;
+    background: colors.$basic-blue;
     &::after {
       left: calc(100% - 22px);
     }
   }
   &:disabled + .switch {
-    background: colors.$gray4;
+    background: colors.$basic-gray4;
   }
 }
 
@@ -28,7 +28,7 @@
   width: 44px;
   height: 24px;
   border-radius: 12px;
-  background: colors.$gray12;
+  background: colors.$basic-gray12;
   transition: background 0.16s ease-in-out;
   &::after {
     content: '';

package/tooltip/tooltip.module.scss

@@ -9,7 +9,7 @@
   padding: 40px 8px;
   box-sizing: border-box;
   overflow: hidden;
-  background: colors.$gray4;
+  background: colors.$basic-gray4;
   border-radius: 4px;
   @extend .shadow-z2;
 }

package/top-bar/top-bar.module.scss

@@ -25,7 +25,7 @@
   .subtitle {
     font-size: 12px;
     line-height: 16px;
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
   }
   .icon-button {
     + .icon-button {
@@ -84,10 +84,10 @@
   flex-shrink: 0;
   overflow: hidden;
   background: transparent;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &:not(.stub):hover {
     cursor: pointer;
-    color: colors.$gray54;
+    color: colors.$basic-gray54;
   }
   > svg {
     fill: currentColor;