@megafon/ui-core 7.5.0 → 7.6.0

package/dist/es/components/Badges/NotificationBadge/NotificationBadge.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium b__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
+h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}

package/dist/es/components/Checkbox/Checkbox.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-checkbox{margin:0 5px 12px}.mfui-checkbox__inner{display:inline-block;position:relative}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:32px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding:4px 15px 4px 33px}.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input{top:6px}.mfui-checkbox_font-size_small{font-size:12px;line-height:16px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding:1px 15px 4px 33px}.mfui-checkbox_font-size_small .mfui-checkbox__custom-input{top:0}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
+h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}

package/dist/es/components/Checkbox/Checkbox.d.ts

@@ -32,7 +32,9 @@ export interface ICheckboxProps {
     error?: boolean;
     /** Дополнительный контент справа */
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
-    children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    /** Отключить нижний отступ */
+    disableBottomMargin?: boolean;
+    children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
     /** Обработчик изменения значения */
     onChange?: (checked: boolean) => void;
 }

package/dist/es/components/Checkbox/Checkbox.js

@@ -29,6 +29,8 @@ var Checkbox = function Checkbox(_ref) {
     extraContent = _ref.extraContent,
     dataAttrs = _ref.dataAttrs,
     classes = _ref.classes,
+    _ref$disableBottomMar = _ref.disableBottomMargin,
+    disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
     onChange = _ref.onChange;
   var isTouch = detectTouch();
   var _React$useState = React.useState(checked),
@@ -50,7 +52,9 @@ var Checkbox = function Checkbox(_ref) {
       color: color,
       checked: isChecked,
       disabled: disabled,
-      error: error
+      error: error,
+      'bottom-margin': !disableBottomMargin,
+      single: !children && !extraContent
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])

package/dist/es/components/Row/Row.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

package/dist/es/components/Row/Row.d.ts

@@ -23,6 +23,8 @@ export interface IRowProps {
     target?: '_self' | '_blank';
     /** rel - аргумент тега <a> */
     rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дочерние элементы: Badges, Switcher, Selector */

package/dist/es/components/Row/Row.js

@@ -30,6 +30,8 @@ var Row = function Row(_ref) {
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
     rel = _ref.rel,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -47,7 +49,8 @@ var Row = function Row(_ref) {
       size: size,
       view: backgroundView,
       pointer: isActive,
-      'has-arrow': showArrow && !showLoader
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
     }, [className, classes.root]),
     href: href,
     target: href ? target : undefined,
@@ -65,7 +68,8 @@ var Row = function Row(_ref) {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    as: isSmallSize ? 'h5' : 'h3'
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
   }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/dist/es/components/ValueField/ValueField.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}

package/dist/es/components/ValueField/ValueField.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import './ValueField.scss';
+export declare const Field: {
+    readonly LINE: "line";
+    readonly INPUT: "input";
+};
+export type FieldType = (typeof Field)[keyof typeof Field];
+export interface IValueField {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Значение */
+    value?: string | number;
+    /** Отображаемый текст при отсутствии значения */
+    placeholder?: string;
+    /** Префикс для значения */
+    valuePrefix?: string;
+    /** Единица измерения значения */
+    valueUnit?: string;
+    /** Позиционирование */
+    position?: 'left' | 'right';
+    /** Цветовая тема */
+    theme?: 'default' | 'gray' | 'color';
+    /** Тип поля */
+    fieldType?: FieldType;
+    /** Отключение поля ввода */
+    disabled?: boolean;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Обработчик потери фокуса */
+    onBlur?: () => void;
+}
+declare const ValueField: React.FC<IValueField>;
+export default ValueField;

package/dist/es/components/ValueField/ValueField.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.trim.js";
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./ValueField.css";
+export var Field = {
+  LINE: 'line',
+  INPUT: 'input'
+};
+var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
+var sanitizeValue = function sanitizeValue(value) {
+  if (typeof value === 'string' && value.trim() === '') {
+    return null;
+  }
+  return value;
+};
+var cn = cnCreate('mfui-value-field');
+var ValueField = function ValueField(_ref) {
+  var className = _ref.className,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    valuePrefix = _ref.valuePrefix,
+    valueUnit = _ref.valueUnit,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'left' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    _ref$fieldType = _ref.fieldType,
+    fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
+    disabled = _ref.disabled,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  var _a;
+  var _useState = useState(value !== null && value !== void 0 ? value : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var currentValue = isControlled ? value : inputValue;
+  var inputRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var isFieldInput = fieldType === Field.INPUT;
+  var RootElement = isFieldInput ? 'label' : 'div';
+  var handleInputBlur = function handleInputBlur() {
+    setIsFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  };
+  var handleInputFocus = function handleInputFocus() {
+    setIsFocused(true);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    !isControlled && setInputValue(e.target.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _a;
+    if (e.key === 'Enter') {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+      return;
+    }
+    if (charsAllowedByNumberInput.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  useEffect(function () {
+    !isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
+  }, [isControlled, value]);
+  return /*#__PURE__*/React.createElement(RootElement, _extends({
+    className: cn({
+      interactive: isFieldInput,
+      theme: theme,
+      position: position,
+      focus: isFocused,
+      disabled: disabled
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
+    className: cn('prefix')
+  }, valuePrefix), /*#__PURE__*/React.createElement("div", {
+    className: cn('box')
+  }, isFieldInput && /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('input'),
+    type: "number",
+    value: currentValue,
+    placeholder: placeholder,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    onKeyDown: handleKeyDown,
+    disabled: disabled
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('line')
+  }, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
+    className: cn('unit')
+  }, valueUnit));
+};
+export default ValueField;

package/dist/es/index.d.ts

@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
 export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';
 export { default as utils } from './components/Modal/utils/utils';
+export { default as ValueField } from './components/ValueField/ValueField';

package/dist/es/index.js

@@ -76,4 +76,5 @@ export { default as UploadFileItemIcon } from "./components/UploadForm/UploadFil
 export { default as useDragAndDrop } from "./components/UploadForm/UploadField/components/useDragAndDrop";
 export { default as useGradient } from "./components/Carousel/useGradient";
 export { default as usePagination } from "./components/Pagination/usePagination";
-export { default as utils } from "./components/Modal/utils/utils";
+export { default as utils } from "./components/Modal/utils/utils";
+export { default as ValueField } from "./components/ValueField/ValueField";

package/dist/lib/components/Badges/NotificationBadge/NotificationBadge.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium b__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
+h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}

package/dist/lib/components/Checkbox/Checkbox.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-checkbox{margin:0 5px 12px}.mfui-checkbox__inner{display:inline-block;position:relative}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:32px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding:4px 15px 4px 33px}.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input{top:6px}.mfui-checkbox_font-size_small{font-size:12px;line-height:16px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding:1px 15px 4px 33px}.mfui-checkbox_font-size_small .mfui-checkbox__custom-input{top:0}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
+h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}

package/dist/lib/components/Checkbox/Checkbox.d.ts

@@ -32,7 +32,9 @@ export interface ICheckboxProps {
     error?: boolean;
     /** Дополнительный контент справа */
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
-    children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    /** Отключить нижний отступ */
+    disableBottomMargin?: boolean;
+    children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
     /** Обработчик изменения значения */
     onChange?: (checked: boolean) => void;
 }

package/dist/lib/components/Checkbox/Checkbox.js

@@ -38,6 +38,8 @@ var Checkbox = function Checkbox(_ref) {
     extraContent = _ref.extraContent,
     dataAttrs = _ref.dataAttrs,
     classes = _ref.classes,
+    _ref$disableBottomMar = _ref.disableBottomMargin,
+    disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
     onChange = _ref.onChange;
   var isTouch = (0, _uiHelpers.detectTouch)();
   var _React$useState = React.useState(checked),
@@ -59,7 +61,9 @@ var Checkbox = function Checkbox(_ref) {
       color: color,
       checked: isChecked,
       disabled: disabled,
-      error: error
+      error: error,
+      'bottom-margin': !disableBottomMargin,
+      single: !children && !extraContent
     }, className)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])

package/dist/lib/components/Row/Row.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

package/dist/lib/components/Row/Row.d.ts

@@ -23,6 +23,8 @@ export interface IRowProps {
     target?: '_self' | '_blank';
     /** rel - аргумент тега <a> */
     rel?: string;
+    /** Автоматическая высота */
+    autoHeight?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дочерние элементы: Badges, Switcher, Selector */

package/dist/lib/components/Row/Row.js

@@ -39,6 +39,8 @@ var Row = function Row(_ref) {
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
     rel = _ref.rel,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -56,7 +58,8 @@ var Row = function Row(_ref) {
       size: size,
       view: backgroundView,
       pointer: isActive,
-      'has-arrow': showArrow && !showLoader
+      'has-arrow': showArrow && !showLoader,
+      'auto-height': autoHeight
     }, [className, classes.root]),
     href: href,
     target: href ? target : undefined,
@@ -74,7 +77,8 @@ var Row = function Row(_ref) {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(_Header["default"], {
     className: cn('title', [classes.title]),
-    as: isSmallSize ? 'h5' : 'h3'
+    as: isSmallSize ? 'h5' : 'h3',
+    space: isSmallSize ? 'tight' : 'wide'
   }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
   }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/dist/lib/components/ValueField/ValueField.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}

package/dist/lib/components/ValueField/ValueField.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import './ValueField.scss';
+export declare const Field: {
+    readonly LINE: "line";
+    readonly INPUT: "input";
+};
+export type FieldType = (typeof Field)[keyof typeof Field];
+export interface IValueField {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Значение */
+    value?: string | number;
+    /** Отображаемый текст при отсутствии значения */
+    placeholder?: string;
+    /** Префикс для значения */
+    valuePrefix?: string;
+    /** Единица измерения значения */
+    valueUnit?: string;
+    /** Позиционирование */
+    position?: 'left' | 'right';
+    /** Цветовая тема */
+    theme?: 'default' | 'gray' | 'color';
+    /** Тип поля */
+    fieldType?: FieldType;
+    /** Отключение поля ввода */
+    disabled?: boolean;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Обработчик потери фокуса */
+    onBlur?: () => void;
+}
+declare const ValueField: React.FC<IValueField>;
+export default ValueField;

package/dist/lib/components/ValueField/ValueField.js

@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Field = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Field = exports.Field = {
+  LINE: 'line',
+  INPUT: 'input'
+};
+var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
+var sanitizeValue = function sanitizeValue(value) {
+  if (typeof value === 'string' && value.trim() === '') {
+    return null;
+  }
+  return value;
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-value-field');
+var ValueField = function ValueField(_ref) {
+  var className = _ref.className,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    valuePrefix = _ref.valuePrefix,
+    valueUnit = _ref.valueUnit,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'left' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    _ref$fieldType = _ref.fieldType,
+    fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
+    disabled = _ref.disabled,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  var _a;
+  var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : ''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var currentValue = isControlled ? value : inputValue;
+  var inputRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var isFieldInput = fieldType === Field.INPUT;
+  var RootElement = isFieldInput ? 'label' : 'div';
+  var handleInputBlur = function handleInputBlur() {
+    setIsFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  };
+  var handleInputFocus = function handleInputFocus() {
+    setIsFocused(true);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    !isControlled && setInputValue(e.target.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _a;
+    if (e.key === 'Enter') {
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+      return;
+    }
+    if (charsAllowedByNumberInput.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  (0, _react.useEffect)(function () {
+    !isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
+  }, [isControlled, value]);
+  return /*#__PURE__*/React.createElement(RootElement, (0, _extends2["default"])({
+    className: cn({
+      interactive: isFieldInput,
+      theme: theme,
+      position: position,
+      focus: isFocused,
+      disabled: disabled
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
+    className: cn('prefix')
+  }, valuePrefix), /*#__PURE__*/React.createElement("div", {
+    className: cn('box')
+  }, isFieldInput && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('input'),
+    type: "number",
+    value: currentValue,
+    placeholder: placeholder,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    onKeyDown: handleKeyDown,
+    disabled: disabled
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('line')
+  }, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
+    className: cn('unit')
+  }, valueUnit));
+};
+var _default = exports["default"] = ValueField;

package/dist/lib/index.d.ts

@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
 export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';
 export { default as utils } from './components/Modal/utils/utils';
+export { default as ValueField } from './components/ValueField/ValueField';

package/dist/lib/index.js

@@ -429,6 +429,12 @@ Object.defineProperty(exports, "UploadFileItemIcon", {
     return _UploadFileItemIcon["default"];
   }
 });
+Object.defineProperty(exports, "ValueField", {
+  enumerable: true,
+  get: function get() {
+    return _ValueField["default"];
+  }
+});
 Object.defineProperty(exports, "checkBreakpointsPropTypes", {
   enumerable: true,
   get: function get() {
@@ -556,4 +562,5 @@ var _useDragAndDrop = _interopRequireDefault(require("./components/UploadForm/Up
 var _useGradient = _interopRequireDefault(require("./components/Carousel/useGradient"));
 var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
 var _utils = _interopRequireDefault(require("./components/Modal/utils/utils"));
+var _ValueField = _interopRequireDefault(require("./components/ValueField/ValueField"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "7.5.0",
+    "version": "7.6.0",
     "files": [
         "dist",
         "styles"
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "2254ae9321758f64bbf0756457946865b494cedb"
+    "gitHead": "327dfbd92bc2d6dfd02455d92527ae27d9944207"
 }