@alfalab/core-components 30.8.0-beta.0 → 31.2.0

package/filter-tag/modern/index.css

@@ -80,50 +80,50 @@
 :root {
     --filter-tag-separator-background-color-hover: transparent;
 }
-.filter-tag__component_138wa {
+.filter-tag__component_10rlg {
     display: flex;
     width: max-content;
     box-sizing: border-box
 }
-.filter-tag__component_138wa.filter-tag__disabled_138wa {
+.filter-tag__component_10rlg.filter-tag__disabled_10rlg {
         background-color: var(--tag-background-color-disabled);
     }
-.filter-tag__component_138wa.filter-tag__defaultVariant_138wa {
+.filter-tag__component_10rlg.filter-tag__defaultVariant_10rlg {
         border-radius: var(--tag-border-radius);
     }
-.filter-tag__component_138wa.filter-tag__alt_138wa {
+.filter-tag__component_10rlg.filter-tag__alt_10rlg {
         border-radius: var(--tag-alt-border-radius);
     }
-.filter-tag__component_138wa.filter-tag__checked_138wa:not(.filter-tag__component_138wa.filter-tag__disabled_138wa) {
+.filter-tag__component_10rlg.filter-tag__checked_10rlg:not(.filter-tag__component_10rlg.filter-tag__disabled_10rlg) {
             background-color: var(--tag-background-color-checked);
         }
-.filter-tag__component_138wa.filter-tag__checked_138wa:not(.filter-tag__component_138wa.filter-tag__disabled_138wa).filter-tag__xxs_138wa {
+.filter-tag__component_10rlg.filter-tag__checked_10rlg:not(.filter-tag__component_10rlg.filter-tag__disabled_10rlg).filter-tag__xxs_10rlg {
             min-width: 84px;
         }
-.filter-tag__component_138wa.filter-tag__checked_138wa:not(.filter-tag__component_138wa.filter-tag__disabled_138wa).filter-tag__xs_138wa {
+.filter-tag__component_10rlg.filter-tag__checked_10rlg:not(.filter-tag__component_10rlg.filter-tag__disabled_10rlg).filter-tag__xs_10rlg {
             min-width: 104px;
         }
-.filter-tag__component_138wa.filter-tag__checked_138wa:not(.filter-tag__component_138wa.filter-tag__disabled_138wa).filter-tag__s_138wa {
+.filter-tag__component_10rlg.filter-tag__checked_10rlg:not(.filter-tag__component_10rlg.filter-tag__disabled_10rlg).filter-tag__s_10rlg {
             min-width: 116px;
         }
-.filter-tag__component_138wa.filter-tag__checked_138wa:not(.filter-tag__component_138wa.filter-tag__disabled_138wa):hover {
+.filter-tag__component_10rlg.filter-tag__checked_10rlg:not(.filter-tag__component_10rlg.filter-tag__disabled_10rlg):hover {
             background-color: var(--tag-background-color-checked-hover);
         }
-.filter-tag__component_138wa.filter-tag__checked_138wa:not(.filter-tag__component_138wa.filter-tag__disabled_138wa):active {
+.filter-tag__component_10rlg.filter-tag__checked_10rlg:not(.filter-tag__component_10rlg.filter-tag__disabled_10rlg):active {
             background-color: var(--tag-background-color-checked-active);
         }
-.filter-tag__focused_138wa {
+.filter-tag__focused_10rlg {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.filter-tag__chevron_138wa {
+.filter-tag__chevron_10rlg {
     position: relative;
     transition: transform 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.filter-tag__valueButton_138wa {
+.filter-tag__valueButton_10rlg {
     display: flex;
     align-items: center;
     box-shadow: none;
@@ -140,130 +140,130 @@
     border-style: solid;
     transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease
 }
-.filter-tag__valueButton_138wa.filter-tag__defaultVariant_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__defaultVariant_10rlg {
         border-radius: var(--tag-border-radius);
     }
-.filter-tag__valueButton_138wa.filter-tag__alt_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__alt_10rlg {
         border-radius: var(--tag-alt-border-radius);
     }
-.filter-tag__valueButton_138wa.filter-tag__xxs_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xxs_10rlg {
         min-width: 60px;
         min-height: var(--size-xs-height)
     }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.filter-tag__valueButton_138wa.filter-tag__xxs_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xxs_10rlg {
             /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
             Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
             height: 32px
     }
         }
-.filter-tag__valueButton_138wa.filter-tag__xs_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xs_10rlg {
         min-width: 72px;
         min-height: 40px
     }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.filter-tag__valueButton_138wa.filter-tag__xs_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xs_10rlg {
             /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
             Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
             height: 40px
     }
         }
-.filter-tag__valueButton_138wa.filter-tag__s_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__s_10rlg {
         min-width: 80px;
         min-height: var(--size-s-height)
     }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.filter-tag__valueButton_138wa.filter-tag__s_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__s_10rlg {
             /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
             Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
             height: 48px
     }
         }
-.filter-tag__valueButton_138wa:not(.filter-tag__valueButton_138wa:disabled):hover {
+.filter-tag__valueButton_10rlg:not(.filter-tag__valueButton_10rlg:disabled):hover {
         background-color: var(--tag-background-color-hover);
         border-color: var(--tag-border-color-hover);
     }
-.filter-tag__valueButton_138wa:not(.filter-tag__valueButton_138wa:disabled):active {
+.filter-tag__valueButton_10rlg:not(.filter-tag__valueButton_10rlg:disabled):active {
         background-color: var(--tag-background-color-active);
         border-color: var(--tag-border-color-active);
     }
-.filter-tag__valueButton_138wa:disabled {
+.filter-tag__valueButton_10rlg:disabled {
         cursor: not-allowed;
         background-color: var(--tag-background-color-disabled);
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
     }
-.filter-tag__valueButton_138wa.filter-tag__s_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__s_10rlg {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
         padding-right: var(--gap-s);
         padding-left: var(--gap-xl)
     }
-.filter-tag__valueButton_138wa.filter-tag__s_138wa .filter-tag__chevron_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__s_10rlg .filter-tag__chevron_10rlg {
             margin: 0 var(--gap-xs);
         }
-.filter-tag__valueButton_138wa.filter-tag__xs_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xs_10rlg {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
         padding-right: var(--gap-xs);
         padding-left: var(--gap-l)
     }
-.filter-tag__valueButton_138wa.filter-tag__xs_138wa .filter-tag__chevron_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xs_10rlg .filter-tag__chevron_10rlg {
             margin: 0 var(--gap-xs) 0 var(--gap-2xs);
         }
-.filter-tag__valueButton_138wa.filter-tag__xxs_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xxs_10rlg {
         font-size: 14px;
         line-height: 20px;
         font-weight: 400;
         padding-right: var(--gap-2xs);
         padding-left: var(--gap-m)
     }
-.filter-tag__valueButton_138wa.filter-tag__xxs_138wa .filter-tag__chevron_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__xxs_10rlg .filter-tag__chevron_10rlg {
             margin: 0 var(--gap-xs) 0 var(--gap-2xs);
         }
-.filter-tag__valueButton_138wa.filter-tag__open_138wa .filter-tag__chevron_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__open_10rlg .filter-tag__chevron_10rlg {
         transform: rotateZ(180deg);
     }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg {
         background-color: var(--tag-background-color-checked);
         border-width: 0;
         color: var(--tag-text-color-checked)
     }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa.filter-tag__defaultVariant_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg.filter-tag__defaultVariant_10rlg {
             border-radius: var(--tag-border-radius) 0 0 var(--tag-border-radius)
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa.filter-tag__defaultVariant_138wa:disabled {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg.filter-tag__defaultVariant_10rlg:disabled {
                 border-radius: var(--tag-border-radius);
             }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa.filter-tag__alt_138wa {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg.filter-tag__alt_10rlg {
             border-radius: var(--tag-alt-border-radius) 0 0 var(--tag-alt-border-radius)
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa.filter-tag__alt_138wa:disabled {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg.filter-tag__alt_10rlg:disabled {
                 border-radius: var(--tag-alt-border-radius);
             }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa:not(.filter-tag__valueButton_138wa:disabled) {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg:not(.filter-tag__valueButton_10rlg:disabled) {
             padding-right: 0;
             border-right-width: 0;
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa:not(.filter-tag__valueButton_138wa:disabled):hover {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg:not(.filter-tag__valueButton_10rlg:disabled):hover {
             background-color: var(--tag-background-color-checked-hover);
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa:not(.filter-tag__valueButton_138wa:disabled):active {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg:not(.filter-tag__valueButton_10rlg:disabled):active {
             background-color: var(--tag-background-color-checked-active);
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa:not(.filter-tag__valueButton_138wa:disabled):hover + .filter-tag__clear_138wa:before {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg:not(.filter-tag__valueButton_10rlg:disabled):hover + .filter-tag__clear_10rlg:before {
             background-color: var(--filter-tag-separator-background-color-hover);
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa:not(.filter-tag__valueButton_138wa:disabled):active + .filter-tag__clear_138wa:before {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg:not(.filter-tag__valueButton_10rlg:disabled):active + .filter-tag__clear_10rlg:before {
             background-color: transparent;
         }
-.filter-tag__valueButton_138wa.filter-tag__checked_138wa:disabled {
+.filter-tag__valueButton_10rlg.filter-tag__checked_10rlg:disabled {
             background-color: var(--tag-background-color-checked-disabled);
             color: var(--tag-text-color-checked-disabled);
         }
-.filter-tag__clear_138wa {
+.filter-tag__clear_10rlg {
     position: relative;
     cursor: pointer;
     display: flex;
@@ -271,13 +271,13 @@
     color: var(--color-light-graphic-tertiary);
     background-color: var(--tag-background-color-checked)
 }
-.filter-tag__clear_138wa.filter-tag__defaultVariant_138wa {
+.filter-tag__clear_10rlg.filter-tag__defaultVariant_10rlg {
         border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
     }
-.filter-tag__clear_138wa.filter-tag__alt_138wa {
+.filter-tag__clear_10rlg.filter-tag__alt_10rlg {
         border-radius: 0 var(--tag-alt-border-radius) var(--tag-alt-border-radius) 0;
     }
-.filter-tag__clear_138wa:before {
+.filter-tag__clear_10rlg:before {
         content: '';
         position: absolute;
         left: 0;
@@ -288,39 +288,39 @@
         width: 1px;
         transition: background-color 0.2s ease;
     }
-.filter-tag__clear_138wa:hover:before {
+.filter-tag__clear_10rlg:hover:before {
         background-color: var(--filter-tag-separator-background-color-hover);
     }
-.filter-tag__clear_138wa:active:before {
+.filter-tag__clear_10rlg:active:before {
         background-color: transparent;
     }
-.filter-tag__clear_138wa:hover {
+.filter-tag__clear_10rlg:hover {
         background-color: var(--tag-background-color-checked-hover);
         color: var(--color-light-graphic-primary-inverted);
     }
-.filter-tag__clear_138wa:active {
+.filter-tag__clear_10rlg:active {
         background-color: var(--tag-background-color-checked-active);
         color: var(--color-light-graphic-primary-inverted);
     }
-.filter-tag__clear_138wa.filter-tag__s_138wa {
+.filter-tag__clear_10rlg.filter-tag__s_10rlg {
         padding: 0 var(--gap-s) 0 var(--gap-xs)
     }
-.filter-tag__clear_138wa.filter-tag__s_138wa:before {
+.filter-tag__clear_10rlg.filter-tag__s_10rlg:before {
             height: 24px;
         }
-.filter-tag__clear_138wa.filter-tag__xs_138wa {
+.filter-tag__clear_10rlg.filter-tag__xs_10rlg {
         padding: 0 var(--gap-xs)
     }
-.filter-tag__clear_138wa.filter-tag__xs_138wa:before {
+.filter-tag__clear_10rlg.filter-tag__xs_10rlg:before {
             height: 24px;
         }
-.filter-tag__clear_138wa.filter-tag__xxs_138wa {
+.filter-tag__clear_10rlg.filter-tag__xxs_10rlg {
         padding: 0 3px 0 var(--gap-2xs)
     }
-.filter-tag__clear_138wa.filter-tag__xxs_138wa:before {
+.filter-tag__clear_10rlg.filter-tag__xxs_10rlg:before {
             height: 20px;
         }
-.filter-tag__iconWrapper_138wa {
+.filter-tag__iconWrapper_10rlg {
     width: 24px;
     height: 24px;
     display: flex;

package/form-control/Component.d.ts

@@ -38,6 +38,10 @@ type FormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Лейбл компонента
      */
     label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Слот слева
      */
@@ -112,6 +116,10 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Слот слева
      */

package/form-control/Component.js

@@ -47,13 +47,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"form-control__component_1g93k","inner":"form-control__inner_1g93k","inputWrapper":"form-control__inputWrapper_1g93k","input":"form-control__input_1g93k","label":"form-control__label_1g93k","labelInner":"form-control__labelInner_1g93k","addons":"form-control__addons_1g93k","leftAddons":"form-control__leftAddons_1g93k","rightAddons":"form-control__rightAddons_1g93k","sub":"form-control__sub_1g93k","block":"form-control__block_1g93k","s":"form-control__s_1g93k","hasLabel":"form-control__hasLabel_1g93k","m":"form-control__m_1g93k","l":"form-control__l_1g93k","xl":"form-control__xl_1g93k","hasLeftAddons":"form-control__hasLeftAddons_1g93k","hasRightAddons":"form-control__hasRightAddons_1g93k","disabled":"form-control__disabled_1g93k","focused":"form-control__focused_1g93k","hasError":"form-control__hasError_1g93k","filled":"form-control__filled_1g93k","hiddenLabel":"form-control__hiddenLabel_1g93k"};
+var styles = {"component":"form-control__component_bgsuh","inner":"form-control__inner_bgsuh","inputWrapper":"form-control__inputWrapper_bgsuh","input":"form-control__input_bgsuh","label":"form-control__label_bgsuh","labelInner":"form-control__labelInner_bgsuh","addons":"form-control__addons_bgsuh","leftAddons":"form-control__leftAddons_bgsuh","rightAddons":"form-control__rightAddons_bgsuh","sub":"form-control__sub_bgsuh","above":"form-control__above_bgsuh","block":"form-control__block_bgsuh","s":"form-control__s_bgsuh","hasInnerLabel":"form-control__hasInnerLabel_bgsuh","m":"form-control__m_bgsuh","l":"form-control__l_bgsuh","xl":"form-control__xl_bgsuh","hasLeftAddons":"form-control__hasLeftAddons_bgsuh","hasRightAddons":"form-control__hasRightAddons_bgsuh","disabled":"form-control__disabled_bgsuh","focused":"form-control__focused_bgsuh","hasError":"form-control__hasError_bgsuh","filled":"form-control__filled_bgsuh","hiddenLabel":"form-control__hiddenLabel_bgsuh"};
 require('./index.css');
 
-var defaultColors = {"component":"form-control__component_iq4jp","inner":"form-control__inner_iq4jp","label":"form-control__label_iq4jp","hint":"form-control__hint_iq4jp","disabled":"form-control__disabled_iq4jp","focused":"form-control__focused_iq4jp","hasError":"form-control__hasError_iq4jp","error":"form-control__error_iq4jp"};
+var defaultColors = {"component":"form-control__component_1ut34","inner":"form-control__inner_1ut34","label":"form-control__label_1ut34","hint":"form-control__hint_1ut34","disabled":"form-control__disabled_1ut34","focused":"form-control__focused_1ut34","hasError":"form-control__hasError_1ut34","error":"form-control__error_1ut34"};
 require('./default.css');
 
-var invertedColors = {"component":"form-control__component_1md99","inner":"form-control__inner_1md99","label":"form-control__label_1md99","hint":"form-control__hint_1md99","disabled":"form-control__disabled_1md99","focused":"form-control__focused_1md99","hasError":"form-control__hasError_1md99","error":"form-control__error_1md99"};
+var invertedColors = {"component":"form-control__component_zf3rf","inner":"form-control__inner_zf3rf","label":"form-control__label_zf3rf","hint":"form-control__hint_zf3rf","disabled":"form-control__disabled_zf3rf","focused":"form-control__focused_zf3rf","hasError":"form-control__hasError_zf3rf","error":"form-control__error_zf3rf"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -62,18 +62,19 @@ var colorStyles = {
 };
 var FormControl = React__default['default'].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, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
+    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, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, 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, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default['default'].createElement("div", { "data-test-id": dataTestId, className: cn__default['default'](styles.component, colorStyles[colors].component, className, styles[size], (_b = {},
             _b[styles.block] = block,
             _b[styles.hasLeftAddons] = leftAddons,
             _b[styles.hasRightAddons] = rightAddons || error,
             _b)) },
+        label && labelView === 'outer' && (React__default['default'].createElement("span", { className: cn__default['default'](styles.above, colorStyles[colors].label) }, label)),
         React__default['default'].createElement("div", __assign({}, restProps, { className: cn__default['default'](fieldClassName, styles.inner, colorStyles[colors].inner, (_c = {},
                 _c[styles.disabled] = disabled,
                 _c[colorStyles[colors].disabled] = disabled,
                 _c[styles.filled] = filled,
-                _c[styles.hasLabel] = label,
+                _c[styles.hasInnerLabel] = label && labelView === 'inner',
                 _c[styles.focused] = focused,
                 _c[colorStyles[colors].focused] = focused,
                 _c[styles.hasError] = error,
@@ -81,7 +82,7 @@ var FormControl = React__default['default'].forwardRef(function (_a, ref) {
                 _c)), ref: ref }),
             leftAddons && (React__default['default'].createElement("div", { className: cn__default['default'](styles.addons, styles.leftAddons, addonsClassName) }, leftAddons)),
             React__default['default'].createElement("div", { className: styles.inputWrapper },
-                label && (React__default['default'].createElement(React__default['default'].Fragment, null,
+                label && labelView === 'inner' && (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement("span", { className: styles.hiddenLabel, "aria-hidden": true }, label),
                     React__default['default'].createElement("div", { className: cn__default['default'](styles.label, colorStyles[colors].label, labelClassName) },
                         React__default['default'].createElement("span", { className: styles.labelInner }, label)))),

package/form-control/cssm/Component.d.ts

@@ -38,6 +38,10 @@ type FormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Лейбл компонента
      */
     label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Слот слева
      */
@@ -112,6 +116,10 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Слот слева
      */

package/form-control/cssm/Component.js

@@ -59,18 +59,19 @@ var colorStyles = {
 };
 var FormControl = React__default['default'].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, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
+    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, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, 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, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React__default['default'].createElement("div", { "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, colorStyles[colors].component, className, styles__default['default'][size], (_b = {},
             _b[styles__default['default'].block] = block,
             _b[styles__default['default'].hasLeftAddons] = leftAddons,
             _b[styles__default['default'].hasRightAddons] = rightAddons || error,
             _b)) },
+        label && labelView === 'outer' && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].above, colorStyles[colors].label) }, label)),
         React__default['default'].createElement("div", __assign({}, restProps, { className: cn__default['default'](fieldClassName, styles__default['default'].inner, colorStyles[colors].inner, (_c = {},
                 _c[styles__default['default'].disabled] = disabled,
                 _c[colorStyles[colors].disabled] = disabled,
                 _c[styles__default['default'].filled] = filled,
-                _c[styles__default['default'].hasLabel] = label,
+                _c[styles__default['default'].hasInnerLabel] = label && labelView === 'inner',
                 _c[styles__default['default'].focused] = focused,
                 _c[colorStyles[colors].focused] = focused,
                 _c[styles__default['default'].hasError] = error,
@@ -78,7 +79,7 @@ var FormControl = React__default['default'].forwardRef(function (_a, ref) {
                 _c)), ref: ref }),
             leftAddons && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addons, styles__default['default'].leftAddons, addonsClassName) }, leftAddons)),
             React__default['default'].createElement("div", { className: styles__default['default'].inputWrapper },
-                label && (React__default['default'].createElement(React__default['default'].Fragment, null,
+                label && labelView === 'inner' && (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement("span", { className: styles__default['default'].hiddenLabel, "aria-hidden": true }, label),
                     React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].label, colorStyles[colors].label, labelClassName) },
                         React__default['default'].createElement("span", { className: styles__default['default'].labelInner }, label)))),

package/form-control/cssm/index.module.css

@@ -137,6 +137,19 @@
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
 }
+.above {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+
+    display: block;
+    margin-bottom: calc(var(--gap-s) / 2);
+    padding: var(--form-control-sub-paddings);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .block {
     width: 100%;
 }
@@ -144,7 +157,7 @@
 .s .inner {
     min-height: var(--form-control-s-min-height);
 }
-.s .hasLabel .input > * {
+.s .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-s-paddings);
 }
 .s .label {
@@ -153,7 +166,7 @@
 .m .inner {
     min-height: var(--form-control-m-min-height);
 }
-.m .hasLabel .input > * {
+.m .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-m-paddings);
 }
 .m .label {
@@ -162,7 +175,7 @@
 .l .inner {
     min-height: var(--form-control-l-min-height);
 }
-.l .hasLabel .input > * {
+.l .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-l-paddings);
 }
 .l .label {
@@ -177,7 +190,7 @@
 .xl .input > * {
     padding: var(--form-control-xl-paddings);
 }
-.xl .hasLabel .input > * {
+.xl .hasInnerLabel .input > * {
     padding: var(--form-control-labeled-xl-paddings);
 }
 .xl .leftAddons {

package/form-control/default.css

@@ -50,51 +50,51 @@
 
     /* font */
 }
-.form-control__component_iq4jp {
+.form-control__component_1ut34 {
     color: var(--form-control-color);
 }
-.form-control__inner_iq4jp {
+.form-control__inner_1ut34 {
     background-color: var(--form-control-bg-color);
 }
 /* Нижняя граница */
-.form-control__inner_iq4jp:before {
+.form-control__inner_1ut34:before {
     border-bottom: var(--form-control-border-bottom);
 }
-.form-control__label_iq4jp {
+.form-control__label_1ut34 {
     color: var(--form-control-label-color);
 }
-.form-control__hint_iq4jp {
+.form-control__hint_1ut34 {
     color: var(--form-control-hint-color);
 }
 /* DISABLED STATE */
-.form-control__disabled_iq4jp {
+.form-control__disabled_1ut34 {
     background-color: var(--form-control-disabled-bg-color);
     color: var(--form-control-disabled-color);
 }
-.form-control__disabled_iq4jp:before {
+.form-control__disabled_1ut34:before {
     border-bottom: var(--form-control-disabled-border-bottom);
 }
 /* FOCUS STATE */
-.form-control__focused_iq4jp:not(.form-control__disabled_iq4jp):not(.form-control__hasError_iq4jp):before {
+.form-control__focused_1ut34:not(.form-control__disabled_1ut34):not(.form-control__hasError_1ut34):before {
     border-bottom: var(--form-control-focus-border-bottom);
 }
-.form-control__focused_iq4jp.form-control__inner_iq4jp {
+.form-control__focused_1ut34.form-control__inner_1ut34 {
     background-color: var(--form-control-focus-bg-color);
 }
 /* HOVER STATE */
-.form-control__inner_iq4jp:not(.form-control__disabled_iq4jp):hover {
+.form-control__inner_1ut34:not(.form-control__disabled_1ut34):hover {
     background-color: var(--form-control-hover-bg-color);
 }
 /* ERROR STATE */
-.form-control__error_iq4jp {
+.form-control__error_1ut34 {
     color: var(--form-control-error-color);
 }
-.form-control__hasError_iq4jp .form-control__label_iq4jp {
+.form-control__hasError_1ut34 .form-control__label_1ut34 {
     color: var(--form-control-error-label-color);
 }
-.form-control__hasError_iq4jp {
+.form-control__hasError_1ut34 {
     box-shadow: var(--form-control-error-shadow);
 }
-.form-control__hasError_iq4jp:before {
+.form-control__hasError_1ut34:before {
     border-bottom: var(--form-control-error-border-bottom);
 }

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

@@ -38,6 +38,10 @@ type FormControlProps = HTMLAttributes<HTMLDivElement> & {
      * Лейбл компонента
      */
     label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Слот слева
      */
@@ -112,6 +116,10 @@ declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Слот слева
      */

package/form-control/esm/Component.js

@@ -40,13 +40,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"form-control__component_1g93k","inner":"form-control__inner_1g93k","inputWrapper":"form-control__inputWrapper_1g93k","input":"form-control__input_1g93k","label":"form-control__label_1g93k","labelInner":"form-control__labelInner_1g93k","addons":"form-control__addons_1g93k","leftAddons":"form-control__leftAddons_1g93k","rightAddons":"form-control__rightAddons_1g93k","sub":"form-control__sub_1g93k","block":"form-control__block_1g93k","s":"form-control__s_1g93k","hasLabel":"form-control__hasLabel_1g93k","m":"form-control__m_1g93k","l":"form-control__l_1g93k","xl":"form-control__xl_1g93k","hasLeftAddons":"form-control__hasLeftAddons_1g93k","hasRightAddons":"form-control__hasRightAddons_1g93k","disabled":"form-control__disabled_1g93k","focused":"form-control__focused_1g93k","hasError":"form-control__hasError_1g93k","filled":"form-control__filled_1g93k","hiddenLabel":"form-control__hiddenLabel_1g93k"};
+var styles = {"component":"form-control__component_bgsuh","inner":"form-control__inner_bgsuh","inputWrapper":"form-control__inputWrapper_bgsuh","input":"form-control__input_bgsuh","label":"form-control__label_bgsuh","labelInner":"form-control__labelInner_bgsuh","addons":"form-control__addons_bgsuh","leftAddons":"form-control__leftAddons_bgsuh","rightAddons":"form-control__rightAddons_bgsuh","sub":"form-control__sub_bgsuh","above":"form-control__above_bgsuh","block":"form-control__block_bgsuh","s":"form-control__s_bgsuh","hasInnerLabel":"form-control__hasInnerLabel_bgsuh","m":"form-control__m_bgsuh","l":"form-control__l_bgsuh","xl":"form-control__xl_bgsuh","hasLeftAddons":"form-control__hasLeftAddons_bgsuh","hasRightAddons":"form-control__hasRightAddons_bgsuh","disabled":"form-control__disabled_bgsuh","focused":"form-control__focused_bgsuh","hasError":"form-control__hasError_bgsuh","filled":"form-control__filled_bgsuh","hiddenLabel":"form-control__hiddenLabel_bgsuh"};
 require('./index.css');
 
-var defaultColors = {"component":"form-control__component_iq4jp","inner":"form-control__inner_iq4jp","label":"form-control__label_iq4jp","hint":"form-control__hint_iq4jp","disabled":"form-control__disabled_iq4jp","focused":"form-control__focused_iq4jp","hasError":"form-control__hasError_iq4jp","error":"form-control__error_iq4jp"};
+var defaultColors = {"component":"form-control__component_1ut34","inner":"form-control__inner_1ut34","label":"form-control__label_1ut34","hint":"form-control__hint_1ut34","disabled":"form-control__disabled_1ut34","focused":"form-control__focused_1ut34","hasError":"form-control__hasError_1ut34","error":"form-control__error_1ut34"};
 require('./default.css');
 
-var invertedColors = {"component":"form-control__component_1md99","inner":"form-control__inner_1md99","label":"form-control__label_1md99","hint":"form-control__hint_1md99","disabled":"form-control__disabled_1md99","focused":"form-control__focused_1md99","hasError":"form-control__hasError_1md99","error":"form-control__error_1md99"};
+var invertedColors = {"component":"form-control__component_zf3rf","inner":"form-control__inner_zf3rf","label":"form-control__label_zf3rf","hint":"form-control__hint_zf3rf","disabled":"form-control__disabled_zf3rf","focused":"form-control__focused_zf3rf","hasError":"form-control__hasError_zf3rf","error":"form-control__error_zf3rf"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -55,18 +55,19 @@ var colorStyles = {
 };
 var FormControl = 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, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, focused = _a.focused, filled = _a.filled, error = _a.error, hint = _a.hint, label = _a.label, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, children = _a.children, dataTestId = _a.dataTestId, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
+    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, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, disabled = _a.disabled, 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, restProps = __rest(_a, ["block", "size", "colors", "className", "fieldClassName", "labelClassName", "addonsClassName", "disabled", "focused", "filled", "error", "hint", "label", "labelView", "leftAddons", "rightAddons", "bottomAddons", "children", "dataTestId"]);
     var errorMessage = typeof error === 'boolean' ? '' : error;
     return (React.createElement("div", { "data-test-id": dataTestId, className: cn(styles.component, colorStyles[colors].component, className, styles[size], (_b = {},
             _b[styles.block] = block,
             _b[styles.hasLeftAddons] = leftAddons,
             _b[styles.hasRightAddons] = rightAddons || error,
             _b)) },
+        label && labelView === 'outer' && (React.createElement("span", { className: cn(styles.above, colorStyles[colors].label) }, label)),
         React.createElement("div", __assign({}, restProps, { className: cn(fieldClassName, styles.inner, colorStyles[colors].inner, (_c = {},
                 _c[styles.disabled] = disabled,
                 _c[colorStyles[colors].disabled] = disabled,
                 _c[styles.filled] = filled,
-                _c[styles.hasLabel] = label,
+                _c[styles.hasInnerLabel] = label && labelView === 'inner',
                 _c[styles.focused] = focused,
                 _c[colorStyles[colors].focused] = focused,
                 _c[styles.hasError] = error,
@@ -74,7 +75,7 @@ var FormControl = React.forwardRef(function (_a, ref) {
                 _c)), ref: ref }),
             leftAddons && (React.createElement("div", { className: cn(styles.addons, styles.leftAddons, addonsClassName) }, leftAddons)),
             React.createElement("div", { className: styles.inputWrapper },
-                label && (React.createElement(React.Fragment, null,
+                label && labelView === 'inner' && (React.createElement(React.Fragment, null,
                     React.createElement("span", { className: styles.hiddenLabel, "aria-hidden": true }, label),
                     React.createElement("div", { className: cn(styles.label, colorStyles[colors].label, labelClassName) },
                         React.createElement("span", { className: styles.labelInner }, label)))),