npm - @alfalab/core-components - Versions diffs - 48.8.0-beta.0 → 48.8.0 - Mend

@alfalab/core-components 48.8.0-beta.0 → 48.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (944) hide show

package/form-control/cssm/components/base-form-control/index.module.css CHANGED Viewed

@@ -32,6 +32,7 @@
 } :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -47,6 +48,7 @@
     /* error */
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -56,6 +58,7 @@
     /* paddings */
     --form-control-paddings: var(--gap-0) var(--gap-12);
     --form-control-xl-paddings: var(--gap-0) var(--gap-16);
+    --form-control-labeled-40-paddings: 19px var(--gap-8) 3px;
     --form-control-labeled-s-paddings: var(--gap-24) var(--gap-12) var(--gap-4);
     --form-control-labeled-m-paddings: 28px var(--gap-12) var(--gap-8);
     --form-control-labeled-l-paddings: var(--gap-32) var(--gap-12) var(--gap-12);
@@ -111,6 +114,8 @@
 } .input > * {
     padding: var(--form-control-paddings);
     font-family: var(--form-control-font-family);
+} .input.size-40 > * {
+    padding: 0 var(--gap-8);
 } .label {
     font-size: 16px;
     line-height: 20px;
@@ -145,8 +150,13 @@
     font-weight: 400;
     display: block;
     /* adjusting overall height 👌 */
-    margin-top: 6px;
-} .above {
+    margin-top: 6px
+} .sub.size-40 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-top: var(--gap-4);
+    } .above {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -155,10 +165,30 @@
     margin-bottom: calc(var(--gap-12) / 2);
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
-} .block {
+    text-overflow: ellipsis
+} .above.size-40 {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-bottom: var(--gap-4);
+    } .block {
     width: 100%;
-} /* SIZES */ .size-48 .inner {
+} /* SIZES */ .size-40 .inner {
+        min-height: var(--form-control-40-min-height);
+        padding: var(--gap-0) var(--gap-4);
+    } .size-40 .hasInnerLabel .input > * {
+        padding: var(--form-control-labeled-40-paddings);
+    } .size-40 .label {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        top: calc(var(--form-control-40-min-height) / 2);
+        left: var(--gap-8);
+    } .size-40 .addons.rightAddons {
+            padding-right: var(--gap-8);
+        } .size-40 .addons.leftAddons {
+            padding-left: var(--gap-8);
+        } .size-48 .inner {
     min-height: var(--form-control-s-min-height);
 } .size-48 .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-s-paddings);

package/form-control/cssm/desktop/desktop.module.css CHANGED Viewed

@@ -42,6 +42,7 @@
     /* font */
     /* border-radius */
+    --form-control-40-border-radius: var(--border-radius-8);
     --form-control-s-border-radius: var(--border-radius-8);
     --form-control-m-border-radius: var(--border-radius-8);
     --form-control-l-border-radius: var(--border-radius-8);
@@ -60,7 +61,11 @@
     padding: var(--form-control-sub-paddings);
 } .error {
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .size-48 .inner {
+} /* SIZES */ .size-40 .inner {
+    border-radius: var(--form-control-40-border-radius)
+} .size-40 .inner:before {
+        left: 0;
+    } .size-48 .inner {
     border-radius: var(--form-control-s-border-radius);
 } .size-56 .inner {
     border-radius: var(--form-control-m-border-radius);

package/form-control/cssm/mobile/mobile.module.css CHANGED Viewed

@@ -45,6 +45,7 @@
     --form-control-mobile-sub-paddings: var(--gap-0) var(--gap-4);
     /* border-radius mobile */
+    --form-control-mobile-40-border-radius: var(--border-radius-10);
     --form-control-mobile-s-border-radius: var(--border-radius-10);
     --form-control-mobile-m-border-radius: var(--border-radius-10);
     --form-control-mobile-l-border-radius: var(--border-radius-10);
@@ -59,7 +60,11 @@
     padding: var(--form-control-mobile-sub-paddings);
 } .error {
     padding: var(--form-control-mobile-sub-paddings);
-} /* SIZES */ .size-48 .inner {
+} /* SIZES */ .size-40 .inner {
+    border-radius: var(--form-control-mobile-40-border-radius)
+} .size-40 .inner:before {
+        left: 0;
+    } .size-48 .inner {
     border-radius: var(--form-control-mobile-s-border-radius);
 } .size-56 .inner {
     border-radius: var(--form-control-mobile-m-border-radius);

package/form-control/desktop/Component.desktop.js CHANGED Viewed

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var defaultColors = {"inner":"form-control__inner_1ev09","focused":"form-control__focused_1ev09","hasError":"form-control__hasError_1ev09","disabled":"form-control__disabled_1ev09"};
 require('./default.desktop.css');
-var styles = {"above":"form-control__above_mdp7u","sub":"form-control__sub_mdp7u","error":"form-control__error_mdp7u","size-48":"form-control__size-48_mdp7u","inner":"form-control__inner_mdp7u","size-56":"form-control__size-56_mdp7u","size-64":"form-control__size-64_mdp7u","size-72":"form-control__size-72_mdp7u"};
+var styles = {"above":"form-control__above_mdp7u","sub":"form-control__sub_mdp7u","error":"form-control__error_mdp7u","size-40":"form-control__size-40_mdp7u","inner":"form-control__inner_mdp7u","size-48":"form-control__size-48_mdp7u","size-56":"form-control__size-56_mdp7u","size-64":"form-control__size-64_mdp7u","size-72":"form-control__size-72_mdp7u"};
 require('./desktop.css');
 var invertedColors = {"inner":"form-control__inner_1v6zf","hasError":"form-control__hasError_1v6zf","disabled":"form-control__disabled_1v6zf"};

package/form-control/desktop/desktop.css CHANGED Viewed

@@ -43,6 +43,7 @@
     /* font */
     /* border-radius */
+    --form-control-40-border-radius: var(--border-radius-8);
     --form-control-s-border-radius: var(--border-radius-8);
     --form-control-m-border-radius: var(--border-radius-8);
     --form-control-l-border-radius: var(--border-radius-8);
@@ -61,7 +62,11 @@
     padding: var(--form-control-sub-paddings);
 } .form-control__error_mdp7u {
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .form-control__size-48_mdp7u .form-control__inner_mdp7u {
+} /* SIZES */ .form-control__size-40_mdp7u .form-control__inner_mdp7u {
+    border-radius: var(--form-control-40-border-radius)
+} .form-control__size-40_mdp7u .form-control__inner_mdp7u:before {
+        left: 0;
+    } .form-control__size-48_mdp7u .form-control__inner_mdp7u {
     border-radius: var(--form-control-s-border-radius);
 } .form-control__size-56_mdp7u .form-control__inner_mdp7u {
     border-radius: var(--form-control-m-border-radius);

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

@@ -18,7 +18,7 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -125,7 +125,7 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Набор цветов для компонента
      */

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

@@ -6,7 +6,7 @@ import { getDataTestId } from '../../../../shared/esm';
 var defaultColors = {"component":"form-control__component_nrq9y","label":"form-control__label_nrq9y","hint":"form-control__hint_nrq9y","inner":"form-control__inner_nrq9y","disabled":"form-control__disabled_nrq9y","hasError":"form-control__hasError_nrq9y","focused":"form-control__focused_nrq9y","error":"form-control__error_nrq9y"};
 require('./default.css');
-var commonStyles = {"component":"form-control__component_1xsgz","inner":"form-control__inner_1xsgz","inputWrapper":"form-control__inputWrapper_1xsgz","input":"form-control__input_1xsgz","label":"form-control__label_1xsgz","labelInner":"form-control__labelInner_1xsgz","addons":"form-control__addons_1xsgz","leftAddons":"form-control__leftAddons_1xsgz","rightAddons":"form-control__rightAddons_1xsgz","sub":"form-control__sub_1xsgz","above":"form-control__above_1xsgz","block":"form-control__block_1xsgz","size-48":"form-control__size-48_1xsgz","hasInnerLabel":"form-control__hasInnerLabel_1xsgz","size-56":"form-control__size-56_1xsgz","size-64":"form-control__size-64_1xsgz","size-72":"form-control__size-72_1xsgz","hasLeftAddons":"form-control__hasLeftAddons_1xsgz","hasRightAddons":"form-control__hasRightAddons_1xsgz","disabled":"form-control__disabled_1xsgz","focused":"form-control__focused_1xsgz","hasError":"form-control__hasError_1xsgz","filled":"form-control__filled_1xsgz","hiddenLabel":"form-control__hiddenLabel_1xsgz"};
+var commonStyles = {"component":"form-control__component_1xsgz","inner":"form-control__inner_1xsgz","inputWrapper":"form-control__inputWrapper_1xsgz","input":"form-control__input_1xsgz","size-40":"form-control__size-40_1xsgz","label":"form-control__label_1xsgz","labelInner":"form-control__labelInner_1xsgz","addons":"form-control__addons_1xsgz","leftAddons":"form-control__leftAddons_1xsgz","rightAddons":"form-control__rightAddons_1xsgz","sub":"form-control__sub_1xsgz","above":"form-control__above_1xsgz","block":"form-control__block_1xsgz","hasInnerLabel":"form-control__hasInnerLabel_1xsgz","size-48":"form-control__size-48_1xsgz","size-56":"form-control__size-56_1xsgz","size-64":"form-control__size-64_1xsgz","size-72":"form-control__size-72_1xsgz","hasLeftAddons":"form-control__hasLeftAddons_1xsgz","hasRightAddons":"form-control__hasRightAddons_1xsgz","disabled":"form-control__disabled_1xsgz","focused":"form-control__focused_1xsgz","hasError":"form-control__hasError_1xsgz","filled":"form-control__filled_1xsgz","hiddenLabel":"form-control__hiddenLabel_1xsgz"};
 require('./index.css');
 var invertedColors = {"component":"form-control__component_i6ofn","label":"form-control__label_i6ofn","hint":"form-control__hint_i6ofn","inner":"form-control__inner_i6ofn","disabled":"form-control__disabled_i6ofn","hasError":"form-control__hasError_i6ofn","focused":"form-control__focused_i6ofn","error":"form-control__error_i6ofn"};
@@ -21,6 +21,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',
@@ -35,7 +36,7 @@ var BaseFormControl = React.forwardRef(function (_a, ref) {
             _b[commonStyles.hasLeftAddons] = leftAddons,
             _b[commonStyles.hasRightAddons] = rightAddons || error,
             _b)) },
-        label && labelView === 'outer' && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: cn(commonStyles.above, styles.above, colorCommonStyles[colors].label) }, label)),
+        label && labelView === 'outer' && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: cn(commonStyles.above, commonStyles["size-".concat(size)], styles.above, colorCommonStyles[colors].label) }, label)),
         React.createElement("div", __assign({ "data-test-id": getDataTestId(dataTestId, 'inner') }, restProps, { className: cn(fieldClassName, commonStyles.inner, styles.inner, colorCommonStyles[colors].inner, colorStyles[colors].inner, (_c = {},
                 _c[commonStyles.disabled] = disabled || readOnly,
                 _c[colorCommonStyles[colors].disabled] = disabled || readOnly,
@@ -55,11 +56,11 @@ var BaseFormControl = React.forwardRef(function (_a, ref) {
                     React.createElement("span", { className: commonStyles.hiddenLabel, "aria-hidden": true }, label),
                     React.createElement("div", { className: cn(commonStyles.label, colorCommonStyles[colors].label, labelClassName) },
                         React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: commonStyles.labelInner }, label)))),
-                React.createElement("div", { className: commonStyles.input }, children)),
+                React.createElement("div", { className: cn(commonStyles.input, commonStyles["size-".concat(size)]) }, children)),
             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", { "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))));
+        errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'error-message'), className: cn(commonStyles.sub, commonStyles["size-".concat(size)], styles.error, colorCommonStyles[colors].error), role: 'alert' }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'hint'), className: cn(commonStyles.sub, commonStyles["size-".concat(size)], styles.sub, colorCommonStyles[colors].hint) }, hint))));
 });
 export { BaseFormControl };

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

@@ -33,6 +33,7 @@
 } :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -48,6 +49,7 @@
     /* error */
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -57,6 +59,7 @@
     /* paddings */
     --form-control-paddings: var(--gap-0) var(--gap-12);
     --form-control-xl-paddings: var(--gap-0) var(--gap-16);
+    --form-control-labeled-40-paddings: 19px var(--gap-8) 3px;
     --form-control-labeled-s-paddings: var(--gap-24) var(--gap-12) var(--gap-4);
     --form-control-labeled-m-paddings: 28px var(--gap-12) var(--gap-8);
     --form-control-labeled-l-paddings: var(--gap-32) var(--gap-12) var(--gap-12);
@@ -112,6 +115,8 @@
 } .form-control__input_1xsgz > * {
     padding: var(--form-control-paddings);
     font-family: var(--form-control-font-family);
+} .form-control__input_1xsgz.form-control__size-40_1xsgz > * {
+    padding: 0 var(--gap-8);
 } .form-control__label_1xsgz {
     font-size: 16px;
     line-height: 20px;
@@ -146,8 +151,13 @@
     font-weight: 400;
     display: block;
     /* adjusting overall height 👌 */
-    margin-top: 6px;
-} .form-control__above_1xsgz {
+    margin-top: 6px
+} .form-control__sub_1xsgz.form-control__size-40_1xsgz {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-top: var(--gap-4);
+    } .form-control__above_1xsgz {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -156,10 +166,30 @@
     margin-bottom: calc(var(--gap-12) / 2);
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
-} .form-control__block_1xsgz {
+    text-overflow: ellipsis
+} .form-control__above_1xsgz.form-control__size-40_1xsgz {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-bottom: var(--gap-4);
+    } .form-control__block_1xsgz {
     width: 100%;
-} /* SIZES */ .form-control__size-48_1xsgz .form-control__inner_1xsgz {
+} /* SIZES */ .form-control__size-40_1xsgz .form-control__inner_1xsgz {
+        min-height: var(--form-control-40-min-height);
+        padding: var(--gap-0) var(--gap-4);
+    } .form-control__size-40_1xsgz .form-control__hasInnerLabel_1xsgz .form-control__input_1xsgz > * {
+        padding: var(--form-control-labeled-40-paddings);
+    } .form-control__size-40_1xsgz .form-control__label_1xsgz {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        top: calc(var(--form-control-40-min-height) / 2);
+        left: var(--gap-8);
+    } .form-control__size-40_1xsgz .form-control__addons_1xsgz.form-control__rightAddons_1xsgz {
+            padding-right: var(--gap-8);
+        } .form-control__size-40_1xsgz .form-control__addons_1xsgz.form-control__leftAddons_1xsgz {
+            padding-left: var(--gap-8);
+        } .form-control__size-48_1xsgz .form-control__inner_1xsgz {
     min-height: var(--form-control-s-min-height);
 } .form-control__size-48_1xsgz .form-control__hasInnerLabel_1xsgz .form-control__input_1xsgz > * {
     padding: var(--form-control-labeled-s-paddings);

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

@@ -7,7 +7,7 @@ import '../../../shared/esm';
 var defaultColors = {"inner":"form-control__inner_1ev09","focused":"form-control__focused_1ev09","hasError":"form-control__hasError_1ev09","disabled":"form-control__disabled_1ev09"};
 require('./default.desktop.css');
-var styles = {"above":"form-control__above_mdp7u","sub":"form-control__sub_mdp7u","error":"form-control__error_mdp7u","size-48":"form-control__size-48_mdp7u","inner":"form-control__inner_mdp7u","size-56":"form-control__size-56_mdp7u","size-64":"form-control__size-64_mdp7u","size-72":"form-control__size-72_mdp7u"};
+var styles = {"above":"form-control__above_mdp7u","sub":"form-control__sub_mdp7u","error":"form-control__error_mdp7u","size-40":"form-control__size-40_mdp7u","inner":"form-control__inner_mdp7u","size-48":"form-control__size-48_mdp7u","size-56":"form-control__size-56_mdp7u","size-64":"form-control__size-64_mdp7u","size-72":"form-control__size-72_mdp7u"};
 require('./desktop.css');
 var invertedColors = {"inner":"form-control__inner_1v6zf","hasError":"form-control__hasError_1v6zf","disabled":"form-control__disabled_1v6zf"};

package/form-control/esm/desktop/desktop.css CHANGED Viewed

@@ -43,6 +43,7 @@
     /* font */
     /* border-radius */
+    --form-control-40-border-radius: var(--border-radius-8);
     --form-control-s-border-radius: var(--border-radius-8);
     --form-control-m-border-radius: var(--border-radius-8);
     --form-control-l-border-radius: var(--border-radius-8);
@@ -61,7 +62,11 @@
     padding: var(--form-control-sub-paddings);
 } .form-control__error_mdp7u {
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .form-control__size-48_mdp7u .form-control__inner_mdp7u {
+} /* SIZES */ .form-control__size-40_mdp7u .form-control__inner_mdp7u {
+    border-radius: var(--form-control-40-border-radius)
+} .form-control__size-40_mdp7u .form-control__inner_mdp7u:before {
+        left: 0;
+    } .form-control__size-48_mdp7u .form-control__inner_mdp7u {
     border-radius: var(--form-control-s-border-radius);
 } .form-control__size-56_mdp7u .form-control__inner_mdp7u {
     border-radius: var(--form-control-m-border-radius);

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

@@ -10,7 +10,7 @@ require('./default.mobile.css');
 var invertedColors = {"inner":"form-control__inner_4el7y","disabled":"form-control__disabled_4el7y","hasError":"form-control__hasError_4el7y"};
 require('./inverted.mobile.css');
-var styles = {"above":"form-control__above_13lky","sub":"form-control__sub_13lky","error":"form-control__error_13lky","size-48":"form-control__size-48_13lky","inner":"form-control__inner_13lky","size-56":"form-control__size-56_13lky","size-64":"form-control__size-64_13lky","size-72":"form-control__size-72_13lky"};
+var styles = {"above":"form-control__above_13lky","sub":"form-control__sub_13lky","error":"form-control__error_13lky","size-40":"form-control__size-40_13lky","inner":"form-control__inner_13lky","size-48":"form-control__size-48_13lky","size-56":"form-control__size-56_13lky","size-64":"form-control__size-64_13lky","size-72":"form-control__size-72_13lky"};
 require('./mobile.css');
 var colorStyles = {

package/form-control/esm/mobile/mobile.css CHANGED Viewed

@@ -46,6 +46,7 @@
     --form-control-mobile-sub-paddings: var(--gap-0) var(--gap-4);
     /* border-radius mobile */
+    --form-control-mobile-40-border-radius: var(--border-radius-10);
     --form-control-mobile-s-border-radius: var(--border-radius-10);
     --form-control-mobile-m-border-radius: var(--border-radius-10);
     --form-control-mobile-l-border-radius: var(--border-radius-10);
@@ -60,7 +61,11 @@
     padding: var(--form-control-mobile-sub-paddings);
 } .form-control__error_13lky {
     padding: var(--form-control-mobile-sub-paddings);
-} /* SIZES */ .form-control__size-48_13lky .form-control__inner_13lky {
+} /* SIZES */ .form-control__size-40_13lky .form-control__inner_13lky {
+    border-radius: var(--form-control-mobile-40-border-radius)
+} .form-control__size-40_13lky .form-control__inner_13lky:before {
+        left: 0;
+    } .form-control__size-48_13lky .form-control__inner_13lky {
     border-radius: var(--form-control-mobile-s-border-radius);
 } .form-control__size-56_13lky .form-control__inner_13lky {
     border-radius: var(--form-control-mobile-m-border-radius);

package/form-control/mobile/Component.mobile.js CHANGED Viewed

@@ -14,7 +14,7 @@ require('./default.mobile.css');
 var invertedColors = {"inner":"form-control__inner_4el7y","disabled":"form-control__disabled_4el7y","hasError":"form-control__hasError_4el7y"};
 require('./inverted.mobile.css');
-var styles = {"above":"form-control__above_13lky","sub":"form-control__sub_13lky","error":"form-control__error_13lky","size-48":"form-control__size-48_13lky","inner":"form-control__inner_13lky","size-56":"form-control__size-56_13lky","size-64":"form-control__size-64_13lky","size-72":"form-control__size-72_13lky"};
+var styles = {"above":"form-control__above_13lky","sub":"form-control__sub_13lky","error":"form-control__error_13lky","size-40":"form-control__size-40_13lky","inner":"form-control__inner_13lky","size-48":"form-control__size-48_13lky","size-56":"form-control__size-56_13lky","size-64":"form-control__size-64_13lky","size-72":"form-control__size-72_13lky"};
 require('./mobile.css');
 var colorStyles = {

package/form-control/mobile/mobile.css CHANGED Viewed

@@ -46,6 +46,7 @@
     --form-control-mobile-sub-paddings: var(--gap-0) var(--gap-4);
     /* border-radius mobile */
+    --form-control-mobile-40-border-radius: var(--border-radius-10);
     --form-control-mobile-s-border-radius: var(--border-radius-10);
     --form-control-mobile-m-border-radius: var(--border-radius-10);
     --form-control-mobile-l-border-radius: var(--border-radius-10);
@@ -60,7 +61,11 @@
     padding: var(--form-control-mobile-sub-paddings);
 } .form-control__error_13lky {
     padding: var(--form-control-mobile-sub-paddings);
-} /* SIZES */ .form-control__size-48_13lky .form-control__inner_13lky {
+} /* SIZES */ .form-control__size-40_13lky .form-control__inner_13lky {
+    border-radius: var(--form-control-mobile-40-border-radius)
+} .form-control__size-40_13lky .form-control__inner_13lky:before {
+        left: 0;
+    } .form-control__size-48_13lky .form-control__inner_13lky {
     border-radius: var(--form-control-mobile-s-border-radius);
 } .form-control__size-56_13lky .form-control__inner_13lky {
     border-radius: var(--form-control-mobile-m-border-radius);

package/form-control/modern/components/base-form-control/Component.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -125,7 +125,7 @@ declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttribu
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "m" | "l" | "xl" | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Набор цветов для компонента
      */

package/form-control/modern/components/base-form-control/Component.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { getDataTestId } from '../../../../shared/modern';
 const defaultColors = {"component":"form-control__component_nrq9y","label":"form-control__label_nrq9y","hint":"form-control__hint_nrq9y","inner":"form-control__inner_nrq9y","disabled":"form-control__disabled_nrq9y","hasError":"form-control__hasError_nrq9y","focused":"form-control__focused_nrq9y","error":"form-control__error_nrq9y"};
 require('./default.css');
-const commonStyles = {"component":"form-control__component_1xsgz","inner":"form-control__inner_1xsgz","inputWrapper":"form-control__inputWrapper_1xsgz","input":"form-control__input_1xsgz","label":"form-control__label_1xsgz","labelInner":"form-control__labelInner_1xsgz","addons":"form-control__addons_1xsgz","leftAddons":"form-control__leftAddons_1xsgz","rightAddons":"form-control__rightAddons_1xsgz","sub":"form-control__sub_1xsgz","above":"form-control__above_1xsgz","block":"form-control__block_1xsgz","size-48":"form-control__size-48_1xsgz","hasInnerLabel":"form-control__hasInnerLabel_1xsgz","size-56":"form-control__size-56_1xsgz","size-64":"form-control__size-64_1xsgz","size-72":"form-control__size-72_1xsgz","hasLeftAddons":"form-control__hasLeftAddons_1xsgz","hasRightAddons":"form-control__hasRightAddons_1xsgz","disabled":"form-control__disabled_1xsgz","focused":"form-control__focused_1xsgz","hasError":"form-control__hasError_1xsgz","filled":"form-control__filled_1xsgz","hiddenLabel":"form-control__hiddenLabel_1xsgz"};
+const commonStyles = {"component":"form-control__component_1xsgz","inner":"form-control__inner_1xsgz","inputWrapper":"form-control__inputWrapper_1xsgz","input":"form-control__input_1xsgz","size-40":"form-control__size-40_1xsgz","label":"form-control__label_1xsgz","labelInner":"form-control__labelInner_1xsgz","addons":"form-control__addons_1xsgz","leftAddons":"form-control__leftAddons_1xsgz","rightAddons":"form-control__rightAddons_1xsgz","sub":"form-control__sub_1xsgz","above":"form-control__above_1xsgz","block":"form-control__block_1xsgz","hasInnerLabel":"form-control__hasInnerLabel_1xsgz","size-48":"form-control__size-48_1xsgz","size-56":"form-control__size-56_1xsgz","size-64":"form-control__size-64_1xsgz","size-72":"form-control__size-72_1xsgz","hasLeftAddons":"form-control__hasLeftAddons_1xsgz","hasRightAddons":"form-control__hasRightAddons_1xsgz","disabled":"form-control__disabled_1xsgz","focused":"form-control__focused_1xsgz","hasError":"form-control__hasError_1xsgz","filled":"form-control__filled_1xsgz","hiddenLabel":"form-control__hiddenLabel_1xsgz"};
 require('./index.css');
 const invertedColors = {"component":"form-control__component_i6ofn","label":"form-control__label_i6ofn","hint":"form-control__hint_i6ofn","inner":"form-control__inner_i6ofn","disabled":"form-control__disabled_i6ofn","hasError":"form-control__hasError_i6ofn","focused":"form-control__focused_i6ofn","error":"form-control__error_i6ofn"};
@@ -20,6 +20,7 @@ const SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',
@@ -32,7 +33,7 @@ const BaseFormControl = React.forwardRef(({ block = false, size = 48, colors = '
             [commonStyles.hasLeftAddons]: leftAddons,
             [commonStyles.hasRightAddons]: rightAddons || error,
         }) },
-        label && labelView === 'outer' && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: cn(commonStyles.above, styles.above, colorCommonStyles[colors].label) }, label)),
+        label && labelView === 'outer' && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: cn(commonStyles.above, commonStyles[`size-${size}`], styles.above, colorCommonStyles[colors].label) }, label)),
         React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'inner'), ...restProps, className: cn(fieldClassName, commonStyles.inner, styles.inner, colorCommonStyles[colors].inner, colorStyles[colors].inner, {
                 [commonStyles.disabled]: disabled || readOnly,
                 [colorCommonStyles[colors].disabled]: disabled || readOnly,
@@ -52,11 +53,11 @@ const BaseFormControl = React.forwardRef(({ block = false, size = 48, colors = '
                     React.createElement("span", { className: commonStyles.hiddenLabel, "aria-hidden": true }, label),
                     React.createElement("div", { className: cn(commonStyles.label, colorCommonStyles[colors].label, labelClassName) },
                         React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'label'), className: commonStyles.labelInner }, label)))),
-                React.createElement("div", { className: commonStyles.input }, children)),
+                React.createElement("div", { className: cn(commonStyles.input, commonStyles[`size-${size}`]) }, children)),
             rightAddons && (React.createElement("div", { ...rightAddonsProps, "data-test-id": getDataTestId(dataTestId, 'right-addons'), className: cn(commonStyles.addons, commonStyles.rightAddons, addonsClassName, rightAddonsProps?.className) }, rightAddons))),
         bottomAddons,
-        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))));
+        errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'error-message'), className: cn(commonStyles.sub, commonStyles[`size-${size}`], styles.error, colorCommonStyles[colors].error), role: 'alert' }, errorMessage)),
+        hint && !errorMessage && (React.createElement("span", { "data-test-id": getDataTestId(dataTestId, 'hint'), className: cn(commonStyles.sub, commonStyles[`size-${size}`], styles.sub, colorCommonStyles[colors].hint) }, hint))));
 });
 export { BaseFormControl };

package/form-control/modern/components/base-form-control/index.css CHANGED Viewed

@@ -33,6 +33,7 @@
 } :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -48,6 +49,7 @@
     /* error */
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -57,6 +59,7 @@
     /* paddings */
     --form-control-paddings: var(--gap-0) var(--gap-12);
     --form-control-xl-paddings: var(--gap-0) var(--gap-16);
+    --form-control-labeled-40-paddings: 19px var(--gap-8) 3px;
     --form-control-labeled-s-paddings: var(--gap-24) var(--gap-12) var(--gap-4);
     --form-control-labeled-m-paddings: 28px var(--gap-12) var(--gap-8);
     --form-control-labeled-l-paddings: var(--gap-32) var(--gap-12) var(--gap-12);
@@ -112,6 +115,8 @@
 } .form-control__input_1xsgz > * {
     padding: var(--form-control-paddings);
     font-family: var(--form-control-font-family);
+} .form-control__input_1xsgz.form-control__size-40_1xsgz > * {
+    padding: 0 var(--gap-8);
 } .form-control__label_1xsgz {
     font-size: 16px;
     line-height: 20px;
@@ -146,8 +151,13 @@
     font-weight: 400;
     display: block;
     /* adjusting overall height 👌 */
-    margin-top: 6px;
-} .form-control__above_1xsgz {
+    margin-top: 6px
+} .form-control__sub_1xsgz.form-control__size-40_1xsgz {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-top: var(--gap-4);
+    } .form-control__above_1xsgz {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -156,10 +166,30 @@
     margin-bottom: calc(var(--gap-12) / 2);
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
-} .form-control__block_1xsgz {
+    text-overflow: ellipsis
+} .form-control__above_1xsgz.form-control__size-40_1xsgz {
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 400;
+        margin-bottom: var(--gap-4);
+    } .form-control__block_1xsgz {
     width: 100%;
-} /* SIZES */ .form-control__size-48_1xsgz .form-control__inner_1xsgz {
+} /* SIZES */ .form-control__size-40_1xsgz .form-control__inner_1xsgz {
+        min-height: var(--form-control-40-min-height);
+        padding: var(--gap-0) var(--gap-4);
+    } .form-control__size-40_1xsgz .form-control__hasInnerLabel_1xsgz .form-control__input_1xsgz > * {
+        padding: var(--form-control-labeled-40-paddings);
+    } .form-control__size-40_1xsgz .form-control__label_1xsgz {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+        top: calc(var(--form-control-40-min-height) / 2);
+        left: var(--gap-8);
+    } .form-control__size-40_1xsgz .form-control__addons_1xsgz.form-control__rightAddons_1xsgz {
+            padding-right: var(--gap-8);
+        } .form-control__size-40_1xsgz .form-control__addons_1xsgz.form-control__leftAddons_1xsgz {
+            padding-left: var(--gap-8);
+        } .form-control__size-48_1xsgz .form-control__inner_1xsgz {
     min-height: var(--form-control-s-min-height);
 } .form-control__size-48_1xsgz .form-control__hasInnerLabel_1xsgz .form-control__input_1xsgz > * {
     padding: var(--form-control-labeled-s-paddings);

package/form-control/modern/desktop/Component.desktop.js CHANGED Viewed

@@ -6,7 +6,7 @@ import '../../../shared/modern';
 const defaultColors = {"inner":"form-control__inner_1ev09","focused":"form-control__focused_1ev09","hasError":"form-control__hasError_1ev09","disabled":"form-control__disabled_1ev09"};
 require('./default.desktop.css');
-const styles = {"above":"form-control__above_mdp7u","sub":"form-control__sub_mdp7u","error":"form-control__error_mdp7u","size-48":"form-control__size-48_mdp7u","inner":"form-control__inner_mdp7u","size-56":"form-control__size-56_mdp7u","size-64":"form-control__size-64_mdp7u","size-72":"form-control__size-72_mdp7u"};
+const styles = {"above":"form-control__above_mdp7u","sub":"form-control__sub_mdp7u","error":"form-control__error_mdp7u","size-40":"form-control__size-40_mdp7u","inner":"form-control__inner_mdp7u","size-48":"form-control__size-48_mdp7u","size-56":"form-control__size-56_mdp7u","size-64":"form-control__size-64_mdp7u","size-72":"form-control__size-72_mdp7u"};
 require('./desktop.css');
 const invertedColors = {"inner":"form-control__inner_1v6zf","hasError":"form-control__hasError_1v6zf","disabled":"form-control__disabled_1v6zf"};

package/form-control/modern/desktop/desktop.css CHANGED Viewed

@@ -43,6 +43,7 @@
     /* font */
     /* border-radius */
+    --form-control-40-border-radius: var(--border-radius-8);
     --form-control-s-border-radius: var(--border-radius-8);
     --form-control-m-border-radius: var(--border-radius-8);
     --form-control-l-border-radius: var(--border-radius-8);
@@ -61,7 +62,11 @@
     padding: var(--form-control-sub-paddings);
 } .form-control__error_mdp7u {
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .form-control__size-48_mdp7u .form-control__inner_mdp7u {
+} /* SIZES */ .form-control__size-40_mdp7u .form-control__inner_mdp7u {
+    border-radius: var(--form-control-40-border-radius)
+} .form-control__size-40_mdp7u .form-control__inner_mdp7u:before {
+        left: 0;
+    } .form-control__size-48_mdp7u .form-control__inner_mdp7u {
     border-radius: var(--form-control-s-border-radius);
 } .form-control__size-56_mdp7u .form-control__inner_mdp7u {
     border-radius: var(--form-control-m-border-radius);

package/form-control/modern/mobile/Component.mobile.js CHANGED Viewed

@@ -9,7 +9,7 @@ require('./default.mobile.css');
 const invertedColors = {"inner":"form-control__inner_4el7y","disabled":"form-control__disabled_4el7y","hasError":"form-control__hasError_4el7y"};
 require('./inverted.mobile.css');
-const styles = {"above":"form-control__above_13lky","sub":"form-control__sub_13lky","error":"form-control__error_13lky","size-48":"form-control__size-48_13lky","inner":"form-control__inner_13lky","size-56":"form-control__size-56_13lky","size-64":"form-control__size-64_13lky","size-72":"form-control__size-72_13lky"};
+const styles = {"above":"form-control__above_13lky","sub":"form-control__sub_13lky","error":"form-control__error_13lky","size-40":"form-control__size-40_13lky","inner":"form-control__inner_13lky","size-48":"form-control__size-48_13lky","size-56":"form-control__size-56_13lky","size-64":"form-control__size-64_13lky","size-72":"form-control__size-72_13lky"};
 require('./mobile.css');
 const colorStyles = {

package/form-control/modern/mobile/mobile.css CHANGED Viewed

@@ -46,6 +46,7 @@
     --form-control-mobile-sub-paddings: var(--gap-0) var(--gap-4);
     /* border-radius mobile */
+    --form-control-mobile-40-border-radius: var(--border-radius-10);
     --form-control-mobile-s-border-radius: var(--border-radius-10);
     --form-control-mobile-m-border-radius: var(--border-radius-10);
     --form-control-mobile-l-border-radius: var(--border-radius-10);
@@ -60,7 +61,11 @@
     padding: var(--form-control-mobile-sub-paddings);
 } .form-control__error_13lky {
     padding: var(--form-control-mobile-sub-paddings);
-} /* SIZES */ .form-control__size-48_13lky .form-control__inner_13lky {
+} /* SIZES */ .form-control__size-40_13lky .form-control__inner_13lky {
+    border-radius: var(--form-control-mobile-40-border-radius)
+} .form-control__size-40_13lky .form-control__inner_13lky:before {
+        left: 0;
+    } .form-control__size-48_13lky .form-control__inner_13lky {
     border-radius: var(--form-control-mobile-s-border-radius);
 } .form-control__size-56_13lky .form-control__inner_13lky {
     border-radius: var(--form-control-mobile-m-border-radius);