@alfalab/core-components 42.10.0 → 42.12.0-beta.0

package/form-control/esm/Component.desktop.js

@@ -2,14 +2,15 @@ import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { BaseFormControl } from './components/base-form-control/Component.js';
 import 'classnames';
+import '../../shared/esm';
 
-var defaultColors = {"inner":"form-control__inner_v52td","disabled":"form-control__disabled_v52td","hasError":"form-control__hasError_v52td","focused":"form-control__focused_v52td"};
+var defaultColors = {"inner":"form-control__inner_cutr6","disabled":"form-control__disabled_cutr6","hasError":"form-control__hasError_cutr6","focused":"form-control__focused_cutr6"};
 require('./default.desktop.css');
 
-var styles = {"above":"form-control__above_13edy","sub":"form-control__sub_13edy","error":"form-control__error_13edy","s":"form-control__s_13edy","inner":"form-control__inner_13edy","m":"form-control__m_13edy","l":"form-control__l_13edy","xl":"form-control__xl_13edy"};
+var styles = {"above":"form-control__above_10nzd","sub":"form-control__sub_10nzd","error":"form-control__error_10nzd","s":"form-control__s_10nzd","inner":"form-control__inner_10nzd","m":"form-control__m_10nzd","l":"form-control__l_10nzd","xl":"form-control__xl_10nzd"};
 require('./desktop.css');
 
-var invertedColors = {"inner":"form-control__inner_1b7ft","disabled":"form-control__disabled_1b7ft","hasError":"form-control__hasError_1b7ft","focused":"form-control__focused_1b7ft"};
+var invertedColors = {"inner":"form-control__inner_1p2fz","disabled":"form-control__disabled_1p2fz","hasError":"form-control__hasError_1p2fz","focused":"form-control__focused_1p2fz"};
 require('./inverted.desktop.css');
 
 var colorStyles = {

package/form-control/esm/Component.mobile.js

@@ -2,14 +2,15 @@ import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { BaseFormControl } from './components/base-form-control/Component.js';
 import 'classnames';
+import '../../shared/esm';
 
-var defaultColors = {"inner":"form-control__inner_1pmf4","disabled":"form-control__disabled_1pmf4","hasError":"form-control__hasError_1pmf4","focused":"form-control__focused_1pmf4"};
+var defaultColors = {"inner":"form-control__inner_d0dv6","disabled":"form-control__disabled_d0dv6","hasError":"form-control__hasError_d0dv6","focused":"form-control__focused_d0dv6"};
 require('./default.mobile.css');
 
-var invertedColors = {"inner":"form-control__inner_9rnqd","disabled":"form-control__disabled_9rnqd","hasError":"form-control__hasError_9rnqd","focused":"form-control__focused_9rnqd"};
+var invertedColors = {"inner":"form-control__inner_t1gk3","disabled":"form-control__disabled_t1gk3","hasError":"form-control__hasError_t1gk3","focused":"form-control__focused_t1gk3"};
 require('./inverted.mobile.css');
 
-var styles = {"above":"form-control__above_kvfst","sub":"form-control__sub_kvfst","error":"form-control__error_kvfst","s":"form-control__s_kvfst","inner":"form-control__inner_kvfst","m":"form-control__m_kvfst","l":"form-control__l_kvfst","xl":"form-control__xl_kvfst"};
+var styles = {"above":"form-control__above_1xr8l","sub":"form-control__sub_1xr8l","error":"form-control__error_1xr8l","s":"form-control__s_1xr8l","inner":"form-control__inner_1xr8l","m":"form-control__m_1xr8l","l":"form-control__l_1xr8l","xl":"form-control__xl_1xr8l"};
 require('./mobile.css');
 
 var colorStyles = {

package/form-control/esm/Component.responsive.js

@@ -5,6 +5,7 @@ import { FormControlDesktop } from './Component.desktop.js';
 import { FormControlMobile } from './Component.mobile.js';
 import './components/base-form-control/Component.js';
 import 'classnames';
+import '../../shared/esm';
 
 var FormControl = forwardRef(function (_a, ref) {
     var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);

package/form-control/esm/components/base-form-control/Component.d.ts

@@ -86,6 +86,14 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Дополнительный класс для аддонов
      */
     addonsClassName?: string;
+    /**
+     * Свойства для обертки левых аддонов
+     */
+    leftAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Свойства для обертки правых аддонов
+     */
+    rightAddonsProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -182,6 +190,14 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
      * Дополнительный класс для аддонов
      */
     addonsClassName?: string | undefined;
+    /**
+     * Свойства для обертки левых аддонов
+     */
+    leftAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    /**
+     * Свойства для обертки правых аддонов
+     */
+    rightAddonsProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/form-control/esm/components/base-form-control/Component.js

@@ -1,14 +1,15 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/esm';
 
-var defaultColors = {"component":"form-control__component_l56ap","label":"form-control__label_l56ap","hint":"form-control__hint_l56ap","disabled":"form-control__disabled_l56ap","filled":"form-control__filled_l56ap","focused":"form-control__focused_l56ap","hasError":"form-control__hasError_l56ap","error":"form-control__error_l56ap"};
+var defaultColors = {"component":"form-control__component_1mn5g","label":"form-control__label_1mn5g","hint":"form-control__hint_1mn5g","disabled":"form-control__disabled_1mn5g","filled":"form-control__filled_1mn5g","focused":"form-control__focused_1mn5g","hasError":"form-control__hasError_1mn5g","error":"form-control__error_1mn5g"};
 require('./default.css');
 
-var commonStyles = {"component":"form-control__component_wmf43","inner":"form-control__inner_wmf43","inputWrapper":"form-control__inputWrapper_wmf43","input":"form-control__input_wmf43","label":"form-control__label_wmf43","labelInner":"form-control__labelInner_wmf43","addons":"form-control__addons_wmf43","leftAddons":"form-control__leftAddons_wmf43","rightAddons":"form-control__rightAddons_wmf43","sub":"form-control__sub_wmf43","above":"form-control__above_wmf43","block":"form-control__block_wmf43","s":"form-control__s_wmf43","hasInnerLabel":"form-control__hasInnerLabel_wmf43","m":"form-control__m_wmf43","l":"form-control__l_wmf43","xl":"form-control__xl_wmf43","hasLeftAddons":"form-control__hasLeftAddons_wmf43","hasRightAddons":"form-control__hasRightAddons_wmf43","disabled":"form-control__disabled_wmf43","focused":"form-control__focused_wmf43","hasError":"form-control__hasError_wmf43","filled":"form-control__filled_wmf43","hiddenLabel":"form-control__hiddenLabel_wmf43"};
+var commonStyles = {"component":"form-control__component_s6n9f","inner":"form-control__inner_s6n9f","inputWrapper":"form-control__inputWrapper_s6n9f","input":"form-control__input_s6n9f","label":"form-control__label_s6n9f","labelInner":"form-control__labelInner_s6n9f","addons":"form-control__addons_s6n9f","leftAddons":"form-control__leftAddons_s6n9f","rightAddons":"form-control__rightAddons_s6n9f","sub":"form-control__sub_s6n9f","above":"form-control__above_s6n9f","block":"form-control__block_s6n9f","s":"form-control__s_s6n9f","hasInnerLabel":"form-control__hasInnerLabel_s6n9f","m":"form-control__m_s6n9f","l":"form-control__l_s6n9f","xl":"form-control__xl_s6n9f","hasLeftAddons":"form-control__hasLeftAddons_s6n9f","hasRightAddons":"form-control__hasRightAddons_s6n9f","disabled":"form-control__disabled_s6n9f","focused":"form-control__focused_s6n9f","hasError":"form-control__hasError_s6n9f","filled":"form-control__filled_s6n9f","hiddenLabel":"form-control__hiddenLabel_s6n9f"};
 require('./index.css');
 
-var invertedColors = {"component":"form-control__component_z1j1n","label":"form-control__label_z1j1n","hint":"form-control__hint_z1j1n","disabled":"form-control__disabled_z1j1n","filled":"form-control__filled_z1j1n","focused":"form-control__focused_z1j1n","hasError":"form-control__hasError_z1j1n","error":"form-control__error_z1j1n"};
+var invertedColors = {"component":"form-control__component_1mmt9","label":"form-control__label_1mmt9","hint":"form-control__hint_1mmt9","disabled":"form-control__disabled_1mmt9","filled":"form-control__filled_1mmt9","focused":"form-control__focused_1mmt9","hasError":"form-control__hasError_1mmt9","error":"form-control__error_1mmt9"};
 require('./inverted.css');
 
 var colorCommonStyles = {
@@ -17,7 +18,7 @@ var colorCommonStyles = {
 };
 var BaseFormControl = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, inputWrapperClassName = _a.inputWrapperClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, readOnly = _a.readOnly, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, _g = _a.labelView, labelView = _g === void 0 ? 'inner' : _g, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, styles = _a.styles, _h = _a.colorStyles, colorStyles = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "inputWrapperClassName", "labelClassName", "addonsClassName", "disabled", "readOnly", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId", "styles", "colorStyles"]);
+    var _d = _a.block, block = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 's' : _e, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, className = _a.className, fieldClassName = _a.fieldClassName, inputWrapperClassName = _a.inputWrapperClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, readOnly = _a.readOnly, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, _g = _a.labelView, labelView = _g === void 0 ? 'inner' : _g, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, styles = _a.styles, _h = _a.colorStyles, colorStyles = _h === void 0 ? { default: {}, inverted: {} } : _h, leftAddonsProps = _a.leftAddonsProps, rightAddonsProps = _a.rightAddonsProps, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "inputWrapperClassName", "labelClassName", "addonsClassName", "disabled", "readOnly", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId", "styles", "colorStyles", "leftAddonsProps", "rightAddonsProps"]);
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React.createElement("div", { "data-test-id": dataTestId, className: cn(commonStyles.component, colorCommonStyles[colors].component, className, commonStyles[size], styles[size], (_b = {},
             _b[commonStyles.block] = block,
@@ -39,17 +40,17 @@ var BaseFormControl = React.forwardRef(function (_a, ref) {
                 _c[colorCommonStyles[colors].hasError] = error,
                 _c[colorStyles[colors].hasError] = error,
                 _c)), ref: ref }),
-            leftAddons && (React.createElement("div", { className: cn(commonStyles.addons, commonStyles.leftAddons, addonsClassName) }, leftAddons)),
+            leftAddons && (React.createElement("div", __assign({}, leftAddonsProps, { "data-test-id": getDataTestId(dataTestId, 'left-addons'), className: cn(commonStyles.addons, commonStyles.leftAddons, addonsClassName, leftAddonsProps === null || leftAddonsProps === void 0 ? void 0 : leftAddonsProps.className) }), leftAddons)),
             React.createElement("div", { className: cn(commonStyles.inputWrapper, inputWrapperClassName) },
                 label && labelView === 'inner' && (React.createElement(React.Fragment, null,
                     React.createElement("span", { className: commonStyles.hiddenLabel, "aria-hidden": true }, label),
                     React.createElement("div", { className: cn(commonStyles.label, colorCommonStyles[colors].label, labelClassName) },
                         React.createElement("span", { className: commonStyles.labelInner }, label)))),
                 React.createElement("div", { className: commonStyles.input }, children)),
-            rightAddons && (React.createElement("div", { className: cn(commonStyles.addons, commonStyles.rightAddons, addonsClassName) }, rightAddons))),
+            rightAddons && (React.createElement("div", __assign({}, rightAddonsProps, { "data-test-id": getDataTestId(dataTestId, 'right-addons'), className: cn(commonStyles.addons, commonStyles.rightAddons, addonsClassName, rightAddonsProps === null || rightAddonsProps === void 0 ? void 0 : rightAddonsProps.className) }), rightAddons))),
         bottomAddons,
-        errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.error, colorCommonStyles[colors].error), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, colorCommonStyles[colors].hint) }, hint))));
+        errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'error-message'), className: cn(commonStyles.sub, styles.error, colorCommonStyles[colors].error), role: 'alert' }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'hint'), className: cn(commonStyles.sub, styles.sub, colorCommonStyles[colors].hint) }, hint))));
 });
 
 export { BaseFormControl };

package/form-control/esm/components/base-form-control/default.css

@@ -1,4 +1,4 @@
-/* hash: 1dq7o */
+/* hash: 1rfel */
 :root {
 } /* deprecated */ :root {
     --color-light-text-negative: #d91d0b;
@@ -60,20 +60,20 @@
     /* error mobile */
 
     /* border-bottom mobile */
-} .form-control__component_l56ap {
+} .form-control__component_1mn5g {
     color: var(--form-control-color);
-} .form-control__label_l56ap {
+} .form-control__label_1mn5g {
     color: var(--form-control-label-color);
-} .form-control__hint_l56ap {
+} .form-control__hint_1mn5g {
     color: var(--form-control-hint-color);
-} /* DISABLED STATE */ .form-control__disabled_l56ap {
+} /* DISABLED STATE */ .form-control__disabled_1mn5g {
     color: var(--form-control-disabled-color);
-} .form-control__disabled_l56ap.form-control__filled_l56ap .form-control__label_l56ap {
+} .form-control__disabled_1mn5g.form-control__filled_1mn5g .form-control__label_1mn5g {
     color: var(--form-control-disabled-filled-label-color);
-} /* FOCUS STATE */ .form-control__focused_l56ap:not(.form-control__disabled_l56ap):not(.form-control__hasError_l56ap):before {
+} /* FOCUS STATE */ .form-control__focused_1mn5g:not(.form-control__disabled_1mn5g):not(.form-control__hasError_1mn5g):before {
     border-bottom: var(--form-control-focus-border-bottom);
-} /* ERROR STATE */ .form-control__error_l56ap {
+} /* ERROR STATE */ .form-control__error_1mn5g {
     color: var(--form-control-error-color);
-} .form-control__hasError_l56ap .form-control__label_l56ap {
+} .form-control__hasError_1mn5g .form-control__label_1mn5g {
     color: var(--form-control-error-label-color);
 }

package/form-control/esm/components/base-form-control/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ib9u */
+/* hash: 1wi55 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -70,11 +70,11 @@
     /* error mobile */
 
     /* border-bottom mobile */
-} .form-control__component_wmf43 {
+} .form-control__component_s6n9f {
     font-family: var(--form-control-font-family);
     width: max-content;
     max-width: 100%;
-} .form-control__inner_wmf43 {
+} .form-control__inner_s6n9f {
     display: flex;
     position: relative;
     min-height: 100%;
@@ -84,7 +84,7 @@
     box-sizing: border-box;
     outline: none;
     transform: translateZ(0);
-} /* Нижняя граница */ .form-control__inner_wmf43:before {
+} /* Нижняя граница */ .form-control__inner_s6n9f:before {
     content: '';
     display: block;
     position: absolute;
@@ -93,19 +93,19 @@
     height: 0;
     transition: transform 0.2s ease, border 0.2s ease;
     transform-origin: bottom;
-} .form-control__inputWrapper_wmf43 {
+} .form-control__inputWrapper_s6n9f {
     flex-grow: 1;
     position: relative;
     overflow: hidden;
-} .form-control__input_wmf43 {
+} .form-control__input_s6n9f {
     height: 100%;
     display: flex;
     align-items: center;
     position: relative;
-} .form-control__input_wmf43 > * {
+} .form-control__input_s6n9f > * {
     padding: var(--form-control-paddings);
     font-family: var(--form-control-font-family);
-} .form-control__label_wmf43 {
+} .form-control__label_s6n9f {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -120,27 +120,27 @@
     transition-duration: 200ms;
     transition-property: color, transform;
     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-} .form-control__labelInner_wmf43 {
+} .form-control__labelInner_s6n9f {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-} .form-control__addons_wmf43 {
+} .form-control__addons_s6n9f {
     display: flex;
     flex-shrink: 0;
     align-items: center;
-} .form-control__leftAddons_wmf43 {
+} .form-control__leftAddons_s6n9f {
     padding-left: var(--gap-s);
-} .form-control__rightAddons_wmf43 {
+} .form-control__rightAddons_s6n9f {
     padding-right: var(--gap-s);
-} .form-control__sub_wmf43 {
+} .form-control__sub_s6n9f {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     /* adjusting overall height 👌 */
     margin-top: 6px;
-} .form-control__above_wmf43 {
+} .form-control__above_s6n9f {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -150,73 +150,73 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-} .form-control__block_wmf43 {
+} .form-control__block_s6n9f {
     width: 100%;
-} /* SIZES */ .form-control__s_wmf43 .form-control__inner_wmf43 {
+} /* SIZES */ .form-control__s_s6n9f .form-control__inner_s6n9f {
     min-height: var(--form-control-s-min-height);
-} .form-control__s_wmf43 .form-control__hasInnerLabel_wmf43 .form-control__input_wmf43 > * {
+} .form-control__s_s6n9f .form-control__hasInnerLabel_s6n9f .form-control__input_s6n9f > * {
     padding: var(--form-control-labeled-s-paddings);
-} .form-control__s_wmf43 .form-control__label_wmf43 {
+} .form-control__s_s6n9f .form-control__label_s6n9f {
     top: calc(var(--form-control-s-min-height) / 2);
-} .form-control__m_wmf43 .form-control__inner_wmf43 {
+} .form-control__m_s6n9f .form-control__inner_s6n9f {
     min-height: var(--form-control-m-min-height);
-} .form-control__m_wmf43 .form-control__hasInnerLabel_wmf43 .form-control__input_wmf43 > * {
+} .form-control__m_s6n9f .form-control__hasInnerLabel_s6n9f .form-control__input_s6n9f > * {
     padding: var(--form-control-labeled-m-paddings);
-} .form-control__m_wmf43 .form-control__label_wmf43 {
+} .form-control__m_s6n9f .form-control__label_s6n9f {
     top: calc(var(--form-control-m-min-height) / 2);
-} .form-control__l_wmf43 .form-control__inner_wmf43 {
+} .form-control__l_s6n9f .form-control__inner_s6n9f {
     min-height: var(--form-control-l-min-height);
-} .form-control__l_wmf43 .form-control__hasInnerLabel_wmf43 .form-control__input_wmf43 > * {
+} .form-control__l_s6n9f .form-control__hasInnerLabel_s6n9f .form-control__input_s6n9f > * {
     padding: var(--form-control-labeled-l-paddings);
-} .form-control__l_wmf43 .form-control__label_wmf43 {
+} .form-control__l_s6n9f .form-control__label_s6n9f {
     top: calc(var(--form-control-l-min-height) / 2);
-} .form-control__xl_wmf43 .form-control__inner_wmf43 {
+} .form-control__xl_s6n9f .form-control__inner_s6n9f {
     min-height: var(--form-control-xl-min-height);
-} .form-control__xl_wmf43 .form-control__label_wmf43 {
+} .form-control__xl_s6n9f .form-control__label_s6n9f {
     left: var(--gap-m);
-} .form-control__xl_wmf43 .form-control__input_wmf43 > * {
+} .form-control__xl_s6n9f .form-control__input_s6n9f > * {
     padding: var(--form-control-xl-paddings);
-} .form-control__xl_wmf43 .form-control__hasInnerLabel_wmf43 .form-control__input_wmf43 > * {
+} .form-control__xl_s6n9f .form-control__hasInnerLabel_s6n9f .form-control__input_s6n9f > * {
     padding: var(--form-control-labeled-xl-paddings);
-} .form-control__xl_wmf43 .form-control__leftAddons_wmf43 {
+} .form-control__xl_s6n9f .form-control__leftAddons_s6n9f {
     padding-left: var(--gap-m);
-} .form-control__xl_wmf43 .form-control__rightAddons_wmf43 {
+} .form-control__xl_s6n9f .form-control__rightAddons_s6n9f {
     padding-right: var(--gap-m);
-} .form-control__xl_wmf43.form-control__hasLeftAddons_wmf43 .form-control__label_wmf43 {
+} .form-control__xl_s6n9f.form-control__hasLeftAddons_s6n9f .form-control__label_s6n9f {
     left: var(--gap-s);
-} .form-control__xl_wmf43.form-control__hasLeftAddons_wmf43 .form-control__input_wmf43 > * {
+} .form-control__xl_s6n9f.form-control__hasLeftAddons_s6n9f .form-control__input_s6n9f > * {
     padding-left: var(--gap-s);
-} .form-control__xl_wmf43.form-control__hasRightAddons_wmf43 .form-control__input_wmf43 > * {
+} .form-control__xl_s6n9f.form-control__hasRightAddons_s6n9f .form-control__input_s6n9f > * {
     padding-right: var(--gap-s);
-} .form-control__xl_wmf43 .form-control__label_wmf43 {
+} .form-control__xl_s6n9f .form-control__label_s6n9f {
     top: calc(var(--form-control-xl-min-height) / 2);
-} /* DISABLED STATE */ .form-control__disabled_wmf43 {
+} /* DISABLED STATE */ .form-control__disabled_s6n9f {
     opacity: var(--form-control-disabled-opacity);
-} /* FOCUS STATE */ .form-control__focused_wmf43:not(.form-control__disabled_wmf43):before,
-.form-control__hasError_wmf43:before {
+} /* FOCUS STATE */ .form-control__focused_s6n9f:not(.form-control__disabled_s6n9f):before,
+.form-control__hasError_s6n9f:before {
     transform: scaleY(2);
-} .form-control__filled_wmf43 .form-control__label_wmf43 {
+} .form-control__filled_s6n9f .form-control__label_s6n9f {
     transform: translateY(-100%) scale(0.875);
 
     /* adjusting position 👌 */
     margin-top: 1px;
-} .form-control__xl_wmf43 .form-control__filled_wmf43 .form-control__label_wmf43 {
+} .form-control__xl_s6n9f .form-control__filled_s6n9f .form-control__label_s6n9f {
     /* adjusting position 👌 */
     margin-top: -1px;
-} .form-control__hiddenLabel_wmf43 {
+} .form-control__hiddenLabel_s6n9f {
     opacity: 0;
     height: 0;
     padding: var(--form-control-paddings);
     display: block;
     box-sizing: border-box;
-} .form-control__xl_wmf43 .form-control__hiddenLabel_wmf43 {
+} .form-control__xl_s6n9f .form-control__hiddenLabel_s6n9f {
     padding: var(--form-control-xl-paddings);
 } /* min-height and width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .form-control__component_wmf43 {
+    .form-control__component_s6n9f {
         display: inline-block;
     }
 
-    .form-control__inner_wmf43:after {
+    .form-control__inner_s6n9f:after {
         min-height: inherit;
         font-size: 0;
         content: '';

package/form-control/esm/components/base-form-control/index.js

@@ -2,3 +2,4 @@ export { BaseFormControl } from './Component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
+import '../../../../shared/esm';

package/form-control/esm/components/base-form-control/inverted.css

@@ -1,4 +1,4 @@
-/* hash: w9c4p */
+/* hash: 19yj1 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary-inverted: #fff;
@@ -62,20 +62,20 @@
     /* error mobile */
 
     /* border-bottom mobile */
-} .form-control__component_z1j1n {
+} .form-control__component_1mmt9 {
     color: var(--form-control-inverted-color);
-} .form-control__label_z1j1n {
+} .form-control__label_1mmt9 {
     color: var(--form-control-inverted-label-color);
-} .form-control__hint_z1j1n {
+} .form-control__hint_1mmt9 {
     color: var(--form-control-inverted-hint-color);
-} /* DISABLED STATE */ .form-control__disabled_z1j1n {
+} /* DISABLED STATE */ .form-control__disabled_1mmt9 {
     color: var(--form-control-inverted-disabled-color);
-} .form-control__disabled_z1j1n.form-control__filled_z1j1n .form-control__label_z1j1n {
+} .form-control__disabled_1mmt9.form-control__filled_1mmt9 .form-control__label_1mmt9 {
     color: var(--form-control-inverted-disabled-filled-label-color);
-} /* FOCUS STATE */ .form-control__focused_z1j1n:not(.form-control__disabled_z1j1n):not(.form-control__hasError_z1j1n):before {
+} /* FOCUS STATE */ .form-control__focused_1mmt9:not(.form-control__disabled_1mmt9):not(.form-control__hasError_1mmt9):before {
     border-bottom: var(--form-control-inverted-focus-border-bottom);
-} /* ERROR STATE */ .form-control__error_z1j1n {
+} /* ERROR STATE */ .form-control__error_1mmt9 {
     color: var(--form-control-inverted-error-color);
-} .form-control__hasError_z1j1n .form-control__label_z1j1n {
+} .form-control__hasError_1mmt9 .form-control__label_1mmt9 {
     color: var(--form-control-inverted-error-label-color);
 }

package/form-control/esm/default.desktop.css

@@ -1,4 +1,4 @@
-/* hash: rnk0r */
+/* hash: 15cqx */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -67,29 +67,29 @@
     /* error mobile */
 
     /* border-bottom mobile */
-} .form-control__inner_v52td {
+} .form-control__inner_cutr6 {
     background-color: var(--form-control-bg-color);
-} /* Нижняя граница */ .form-control__inner_v52td:before {
+} /* Нижняя граница */ .form-control__inner_cutr6:before {
     border-bottom: var(--form-control-border-bottom);
-} /* DISABLED STATE */ .form-control__disabled_v52td {
+} /* DISABLED STATE */ .form-control__disabled_cutr6 {
     background-color: var(--form-control-disabled-bg-color);
     box-shadow: var(--form-control-disabled-shadow);
-} .form-control__disabled_v52td:before {
+} .form-control__disabled_cutr6:before {
     border-bottom: var(--form-control-disabled-border-bottom);
-} .form-control__disabled_v52td.form-control__hasError_v52td {
+} .form-control__disabled_cutr6.form-control__hasError_cutr6 {
     box-shadow: var(--form-control-error-disabled-shadow);
     background-color: var(--form-control-disabled-bg-color);
-} /* HOVER STATE */ .form-control__inner_v52td:not(.form-control__disabled_v52td):hover {
+} /* HOVER STATE */ .form-control__inner_cutr6:not(.form-control__disabled_cutr6):hover {
     background-color: var(--form-control-hover-bg-color);
-} /* FOCUS STATE */ .form-control__focused_v52td.form-control__inner_v52td,
-.form-control__focused_v52td.form-control__inner_v52td:hover {
+} /* FOCUS STATE */ .form-control__focused_cutr6.form-control__inner_cutr6,
+.form-control__focused_cutr6.form-control__inner_cutr6:hover {
     background-color: var(--form-control-focus-bg-color);
     box-shadow: var(--form-control-focus-shadow)
-} .form-control__focused_v52td.form-control__inner_v52td.form-control__hasError_v52td, .form-control__focused_v52td.form-control__inner_v52td:hover.form-control__hasError_v52td {
+} .form-control__focused_cutr6.form-control__inner_cutr6.form-control__hasError_cutr6, .form-control__focused_cutr6.form-control__inner_cutr6:hover.form-control__hasError_cutr6 {
         box-shadow: var(--form-control-focus-error-shadow);
-    } .form-control__hasError_v52td {
+    } .form-control__hasError_cutr6 {
     box-shadow: var(--form-control-error-shadow);
     background-color: var(--form-control-error-bg-color);
-} .form-control__hasError_v52td:before {
+} .form-control__hasError_cutr6:before {
     border-bottom: var(--form-control-error-border-bottom);
 }

package/form-control/esm/default.mobile.css

@@ -1,4 +1,4 @@
-/* hash: bzuzp */
+/* hash: p1d75 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -65,29 +65,29 @@
     --form-control-mobile-border-bottom: 0;
     --form-control-mobile-disabled-border-bottom: 0;
     --form-control-error-mobile-border-bottom: 0;
-} .form-control__inner_1pmf4 {
+} .form-control__inner_d0dv6 {
     background-color: var(--form-control-mobile-bg-color);
-} /* Нижняя граница */ .form-control__inner_1pmf4:before {
+} /* Нижняя граница */ .form-control__inner_d0dv6:before {
     border-bottom: var(--form-control-mobile-border-bottom);
-} /* DISABLED STATE */ .form-control__disabled_1pmf4 {
+} /* DISABLED STATE */ .form-control__disabled_d0dv6 {
     background-color: var(--form-control-mobile-disabled-bg-color);
     box-shadow: var(--form-control-mobile-disabled-shadow);
-} .form-control__disabled_1pmf4:before {
+} .form-control__disabled_d0dv6:before {
     border-bottom: var(--form-control-mobile-disabled-border-bottom);
-} .form-control__disabled_1pmf4.form-control__hasError_1pmf4 {
+} .form-control__disabled_d0dv6.form-control__hasError_d0dv6 {
     box-shadow: var(--form-control-error-mobile-disabled-shadow);
     background-color: var(--form-control-mobile-disabled-bg-color);
-} /* HOVER STATE */ .form-control__inner_1pmf4:not(.form-control__disabled_1pmf4):hover {
+} /* HOVER STATE */ .form-control__inner_d0dv6:not(.form-control__disabled_d0dv6):hover {
     background-color: var(--form-control-mobile-hover-bg-color);
-} /* FOCUS STATE */ .form-control__focused_1pmf4.form-control__inner_1pmf4,
-.form-control__focused_1pmf4.form-control__inner_1pmf4:hover {
+} /* FOCUS STATE */ .form-control__focused_d0dv6.form-control__inner_d0dv6,
+.form-control__focused_d0dv6.form-control__inner_d0dv6:hover {
     background-color: var(--form-control-focus-mobile-bg-color);
     box-shadow: var(--form-control-focus-mobile-shadow)
-} .form-control__focused_1pmf4.form-control__inner_1pmf4.form-control__hasError_1pmf4, .form-control__focused_1pmf4.form-control__inner_1pmf4:hover.form-control__hasError_1pmf4 {
+} .form-control__focused_d0dv6.form-control__inner_d0dv6.form-control__hasError_d0dv6, .form-control__focused_d0dv6.form-control__inner_d0dv6:hover.form-control__hasError_d0dv6 {
         box-shadow: var(--form-control-focus-error-mobile-shadow);
-    } .form-control__hasError_1pmf4 {
+    } .form-control__hasError_d0dv6 {
     box-shadow: var(--form-control-error-mobile-shadow);
     background-color: var(--form-control-error-mobile-bg-color);
-} .form-control__hasError_1pmf4:before {
+} .form-control__hasError_d0dv6:before {
     border-bottom: var(--form-control-error-mobile-border-bottom);
 }

package/form-control/esm/desktop.css

@@ -1,4 +1,4 @@
-/* hash: jo1sc */
+/* hash: 5yuv6 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -56,18 +56,18 @@
     /* error mobile */
 
     /* border-bottom mobile */
-} .form-control__above_13edy {
+} .form-control__above_10nzd {
     padding: var(--form-control-sub-paddings);
-} .form-control__sub_13edy {
+} .form-control__sub_10nzd {
     padding: var(--form-control-sub-paddings);
-} .form-control__error_13edy {
+} .form-control__error_10nzd {
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .form-control__s_13edy .form-control__inner_13edy {
+} /* SIZES */ .form-control__s_10nzd .form-control__inner_10nzd {
     border-radius: var(--form-control-s-border-radius);
-} .form-control__m_13edy .form-control__inner_13edy {
+} .form-control__m_10nzd .form-control__inner_10nzd {
     border-radius: var(--form-control-m-border-radius);
-} .form-control__l_13edy .form-control__inner_13edy {
+} .form-control__l_10nzd .form-control__inner_10nzd {
     border-radius: var(--form-control-l-border-radius);
-} .form-control__xl_13edy .form-control__inner_13edy {
+} .form-control__xl_10nzd .form-control__inner_10nzd {
     border-radius: var(--form-control-xl-border-radius);
 }

package/form-control/esm/desktop.js

@@ -3,3 +3,4 @@ import 'tslib';
 import 'react';
 import './components/base-form-control/Component.js';
 import 'classnames';
+import '../../shared/esm';

package/form-control/esm/index.js

@@ -5,4 +5,5 @@ import '../../mq/esm';
 import './Component.desktop.js';
 import './components/base-form-control/Component.js';
 import 'classnames';
+import '../../shared/esm';
 import './Component.mobile.js';

package/form-control/esm/inverted.desktop.css

@@ -1,4 +1,4 @@
-/* hash: 190td */
+/* hash: uty1v */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary-inverted: #121212;
@@ -73,29 +73,29 @@
     /* error mobile */
 
     /* border-bottom mobile */
-} .form-control__inner_1b7ft {
+} .form-control__inner_1p2fz {
     background-color: var(--form-control-inverted-bg-color);
-} /* Нижняя граница */ .form-control__inner_1b7ft:before {
+} /* Нижняя граница */ .form-control__inner_1p2fz:before {
     border-bottom: var(--form-control-inverted-border-bottom);
-} /* DISABLED STATE */ .form-control__disabled_1b7ft {
+} /* DISABLED STATE */ .form-control__disabled_1p2fz {
     background-color: var(--form-control-inverted-disabled-bg-color);
     box-shadow: var(--form-control-inverted-disabled-shadow);
-} .form-control__disabled_1b7ft:before {
+} .form-control__disabled_1p2fz:before {
     border-bottom: var(--form-control-inverted-disabled-border-bottom);
-} .form-control__disabled_1b7ft.form-control__hasError_1b7ft {
+} .form-control__disabled_1p2fz.form-control__hasError_1p2fz {
     box-shadow: var(--form-control-inverted-error-disabled-shadow);
     background-color: var(--form-control-inverted-disabled-bg-color);
-} /* HOVER STATE */ .form-control__inner_1b7ft:not(.form-control__disabled_1b7ft):hover {
+} /* HOVER STATE */ .form-control__inner_1p2fz:not(.form-control__disabled_1p2fz):hover {
     background-color: var(--form-control-inverted-hover-bg-color);
-} /* FOCUS STATE */ .form-control__focused_1b7ft.form-control__inner_1b7ft,
-.form-control__focused_1b7ft.form-control__inner_1b7ft:hover {
+} /* FOCUS STATE */ .form-control__focused_1p2fz.form-control__inner_1p2fz,
+.form-control__focused_1p2fz.form-control__inner_1p2fz:hover {
     background-color: var(--form-control-inverted-focus-bg-color);
     box-shadow: var(--form-control-inverted-focus-shadow)
-} .form-control__focused_1b7ft.form-control__inner_1b7ft.form-control__hasError_1b7ft, .form-control__focused_1b7ft.form-control__inner_1b7ft:hover.form-control__hasError_1b7ft {
+} .form-control__focused_1p2fz.form-control__inner_1p2fz.form-control__hasError_1p2fz, .form-control__focused_1p2fz.form-control__inner_1p2fz:hover.form-control__hasError_1p2fz {
         box-shadow: var(--form-control-inverted-focus-error-shadow);
-    } .form-control__hasError_1b7ft {
+    } .form-control__hasError_1p2fz {
     box-shadow: var(--form-control-inverted-error-shadow);
     background-color: var(--form-control-inverted-error-bg-color);
-} .form-control__hasError_1b7ft:before {
+} .form-control__hasError_1p2fz:before {
     border-bottom: var(--form-control-inverted-error-border-bottom);
 }