@sima-land/ui-nucleons 42.1.0 → 43.0.1

package/phone-input/phone-input.module.scss

@@ -17,7 +17,14 @@
   cursor: pointer;
 }
 
-.popup {
+.arrow {
+  display: block;
+  fill: colors.$basic-gray38;
+  margin-left: 4px;
+  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
+}
+
+.menu {
   position: absolute;
   width: 100%;
   top: 56px;
@@ -25,15 +32,15 @@
   z-index: 2;
 }
 
-.popup-item {
+.menu-item {
   font-size: 16px;
   line-height: 24px;
   .item-name {
-    color: colors.$gray87;
+    color: colors.$basic-gray87;
     flex-grow: 1;
     margin-left: 16px;
   }
   .item-code {
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
   }
 }

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.js

@@ -54,7 +54,7 @@ const cx = bind_1.default.bind(select_module_scss_1.default);
  */
 const renderDefaultArrow = (opened) => {
     const ArrowSVG = opened ? up_1.default : down_1.default;
-    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') });
+    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray38') });
 };
 exports.renderDefaultArrow = renderDefaultArrow;
 /**
@@ -83,10 +83,9 @@ 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' },

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;

package/unknown-content/unknown-content.module.scss

@@ -2,7 +2,7 @@
 @use '../breakpoints';
 
 .root {
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   font-size: 16px;
   line-height: 24px;
 
@@ -15,10 +15,10 @@
 
   // ссылки
   a {
-    color: colors.$brand-blue;
+    color: colors.$basic-blue;
     text-decoration: none;
     &:hover {
-      color: colors.$brand-deep-blue;
+      color: colors.$additional-deep-blue;
     }
   }
 
@@ -56,14 +56,14 @@
     font-weight: 600;
     font-size: 16px;
     line-height: 24px;
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
     margin-bottom: 16px;
   }
   h5 {
     font-weight: normal;
     font-size: 14px;
     line-height: 20px;
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
     margin-bottom: 24px;
   }
   h6 {
@@ -96,13 +96,13 @@
       font-weight: 600;
       font-size: 16px;
       line-height: 24px;
-      color: colors.$gray38;
+      color: colors.$basic-gray38;
       margin-bottom: 16px;
     }
     h5 {
       font-size: 14px;
       line-height: 20px;
-      color: colors.$gray38;
+      color: colors.$basic-gray38;
       margin-bottom: 24px;
     }
     h6 {
@@ -160,7 +160,7 @@
   @include breakpoints.up('xs') {
     table {
       thead {
-        color: colors.$gray38;
+        color: colors.$basic-gray38;
         font-size: 14px;
         line-height: 20px;
         td,
@@ -173,7 +173,7 @@
         padding: 24px 0;
 
         // накидываем именно сюда чтобы работало в Safari
-        box-shadow: inset 0 -1px 0 colors.$gray12;
+        box-shadow: inset 0 -1px 0 colors.$basic-gray12;
         &:not(:last-child) {
           padding-right: 32px;
         }
@@ -190,7 +190,7 @@
       display: block;
     }
     table {
-      box-shadow: inset 0 1px 0 colors.$gray12;
+      box-shadow: inset 0 1px 0 colors.$basic-gray12;
     }
     thead {
       position: absolute;
@@ -199,7 +199,7 @@
     }
     tr {
       padding: 32px 0;
-      box-shadow: inset 0 -1px 0 colors.$gray12;
+      box-shadow: inset 0 -1px 0 colors.$basic-gray12;
     }
     td + td {
       margin-top: 24px;
@@ -209,7 +209,7 @@
       display: block;
       font-size: 14px;
       line-height: 20px;
-      color: colors.$gray38;
+      color: colors.$basic-gray38;
       margin-bottom: 8px;
     }
   }
@@ -264,7 +264,7 @@
       font-weight: normal;
       font-size: 16px;
       line-height: 24px;
-      color: colors.$gray38;
+      color: colors.$basic-gray38;
     }
   }
 
@@ -273,7 +273,7 @@
     display: block;
     width: 100%;
     height: 1px;
-    background: colors.$gray12;
+    background: colors.$basic-gray12;
     margin-bottom: 32px;
     @include breakpoints.up('xs') {
       margin-bottom: 40px;