@megafon/ui-shared 8.4.0 → 8.6.0

package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import * as React from 'react';
-import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../../helpers/setRelAttribute";
 import "./InfoCard.css";
 var ArrowRight16 = function ArrowRight16(props) {
@@ -76,7 +76,7 @@ var InfoCard = function InfoCard(_ref) {
     className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
   }), convert(title, {})), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
     className: cn('description')
-  }), convert(description, {})), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
+  }), convert(description, textConvertConfig)), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
     className: cn('more-info')
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('more-info-text')

package/dist/es/components/PictureBox/PictureBox.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-2x.png)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(img/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(img/mac-book-2x.png)}}

package/dist/es/components/Stepper/Stepper.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper{gap:16px}.mfui-stepper,.mfui-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal .mfui-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}

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

@@ -8,6 +8,7 @@ export interface IStepperProps {
     /** Дополнительные классы элементов */
     classes?: {
         root?: string;
+        itemsWrap?: string;
         item?: string;
         itemIconButton?: string;
         itemTitle?: string;
@@ -30,11 +31,14 @@ export interface IStepperProps {
     isDisabled?: boolean;
     /** Все шаги пройдены */
     isAllChecked?: boolean;
+    /** Отображение контента только активного шага */
+    showActiveStepContent?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        itemsWrap?: Record<string, string>;
         item?: Record<string, string>;
         itemIconButton?: Record<string, string>;
         itemTitle?: Record<string, string>;

package/dist/es/components/Stepper/Stepper.js

@@ -5,7 +5,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.string.iterator.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import StepperItem, { STEPPER_ITEM_THEME_ENUM } from "./StepperItem";
+import StepperItem, { STEPPER_ITEM_THEME_ENUM, STEPPER_ITEM_VIEW_ENUM } from "./StepperItem";
 import "./Stepper.css";
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -20,6 +20,7 @@ var Stepper = function Stepper(_ref) {
     _ref$classes = _ref.classes,
     _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
     rootClassName = _ref$classes2.root,
+    itemsWrapClassName = _ref$classes2.itemsWrap,
     itemClassName = _ref$classes2.item,
     itemIconButtonClassName = _ref$classes2.itemIconButton,
     itemTitleClassName = _ref$classes2.itemTitle,
@@ -37,11 +38,14 @@ var Stepper = function Stepper(_ref) {
     isNumeric = _ref.isNumeric,
     isDisabled = _ref.isDisabled,
     isAllChecked = _ref.isAllChecked,
+    _ref$showActiveStepCo = _ref.showActiveStepContent,
+    showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
     _ref$dataAttrs = _ref.dataAttrs,
     _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
     rootAttrs = _ref$dataAttrs2.root,
+    itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
     itemAttrs = _ref$dataAttrs2.item,
     itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
     itemTitleAttrs = _ref$dataAttrs2.itemTitle,
@@ -56,6 +60,7 @@ var Stepper = function Stepper(_ref) {
     currentIndex = _React$useState2[0],
     setCurrentIndex = _React$useState2[1];
   var hasCustomItems = !!items.length;
+  var isHorizontalContent = isHorizontal || showActiveStepContent;
   var currentItems = hasCustomItems ? items : Array.from({
     length: stepCount
   });
@@ -98,43 +103,53 @@ var Stepper = function Stepper(_ref) {
     }
     return /*#__PURE__*/React.createElement(CheckedIcon, null);
   }, [isNumeric]);
+  var renderItem = React.useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(StepperItem, _extends({}, props, {
+      className: itemClassName,
+      classes: {
+        iconButton: itemIconButtonClassName,
+        title: itemTitleClassName,
+        text: itemTextClassname,
+        link: itemLinkClassName
+      },
+      dataAttrs: {
+        root: itemAttrs,
+        iconButton: itemIconButtonAttrs,
+        title: itemTitleAttrs,
+        text: itemTextAttrs,
+        link: itemLinkAttrs
+      }
+    }));
+  }, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
   var renderItems = React.useMemo(function () {
     return currentItems.map(function (elem, i) {
       var item = elem || {};
       var itemTheme = defineItemTheme(i);
       var itemIcon = item.icon || renderIcon(i, itemTheme);
-      var hasSeparator = i < currentItems.length - 1;
-      return /*#__PURE__*/React.createElement(StepperItem, _extends({}, item, {
-        className: itemClassName,
-        classes: {
-          iconButton: itemIconButtonClassName,
-          title: itemTitleClassName,
-          text: itemTextClassname,
-          link: itemLinkClassName
-        },
-        dataAttrs: {
-          root: itemAttrs,
-          iconButton: itemIconButtonAttrs,
-          title: itemTitleAttrs,
-          text: itemTextAttrs,
-          link: itemLinkAttrs
-        },
-        key: i,
+      return renderItem(_extends(_extends({}, item), {
         icon: itemIcon,
-        hasSeparator: hasSeparator,
-        isHorizontal: isHorizontal,
+        hasSeparator: i < currentItems.length - 1,
+        isHorizontal: isHorizontalContent,
         isDisabled: isDisabled,
         align: align,
         theme: itemTheme,
+        view: showActiveStepContent ? STEPPER_ITEM_VIEW_ENUM.ICON : STEPPER_ITEM_VIEW_ENUM.DEFAULT,
         onClick: handleClickItem(i)
       }));
     });
-  }, [align, currentItems, isDisabled, isHorizontal, itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName, defineItemTheme, handleClickItem, renderIcon]);
+  }, [align, currentItems, isDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
+  var renderSingleItem = renderItem(_extends(_extends({}, currentItems[currentIndex]), {
+    isDisabled: isDisabled,
+    align: align,
+    view: STEPPER_ITEM_VIEW_ENUM.CONTENT
+  }));
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
     className: cn([className, rootClassName], {
-      'is-horizontal': isHorizontal
+      'is-horizontal': isHorizontalContent
     }),
     ref: rootRef
-  }), renderItems);
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(itemsWrapAttrs), {
+    className: cn('items-wrap', [itemsWrapClassName])
+  }), renderItems), showActiveStepContent && renderSingleItem);
 };
 export default Stepper;

package/dist/es/components/Stepper/StepperItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{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;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto}}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{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;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}

package/dist/es/components/Stepper/StepperItem.d.ts

@@ -5,6 +5,11 @@ export declare enum STEPPER_ITEM_THEME_ENUM {
     ACTIVE = "active",
     DEFAULT = "default"
 }
+export declare enum STEPPER_ITEM_VIEW_ENUM {
+    ICON = "icon",
+    CONTENT = "content",
+    DEFAULT = "default"
+}
 export interface IStepperItemProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -35,6 +40,8 @@ export interface IStepperItemProps {
     isDisabled?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
+    /** Варианты отображения */
+    view?: STEPPER_ITEM_VIEW_ENUM;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/es/components/Stepper/StepperItem.js

@@ -10,6 +10,12 @@ export var STEPPER_ITEM_THEME_ENUM;
   STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
   STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
 })(STEPPER_ITEM_THEME_ENUM || (STEPPER_ITEM_THEME_ENUM = {}));
+export var STEPPER_ITEM_VIEW_ENUM;
+(function (STEPPER_ITEM_VIEW_ENUM) {
+  STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
+  STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
+  STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_VIEW_ENUM || (STEPPER_ITEM_VIEW_ENUM = {}));
 var cn = cnCreate('mfui-stepper-item');
 var StepperItem = function StepperItem(_ref) {
   var className = _ref.className,
@@ -20,7 +26,7 @@ var StepperItem = function StepperItem(_ref) {
     textClassName = _ref$classes2.text,
     linkClassName = _ref$classes2.link,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
     title = _ref.title,
     text = _ref.text,
     linkText = _ref.linkText,
@@ -32,6 +38,8 @@ var StepperItem = function StepperItem(_ref) {
     isDisabled = _ref.isDisabled,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
     _ref$dataAttrs = _ref.dataAttrs,
     _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
     rootAttrs = _ref$dataAttrs2.root,
@@ -42,6 +50,8 @@ var StepperItem = function StepperItem(_ref) {
     onClick = _ref.onClick;
   var hasLink = !!linkText && !!linkUrl;
   var hasContent = !!title || !!text || hasLink;
+  var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
+  var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
   var renderContent = /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, title && /*#__PURE__*/React.createElement(Header, {
@@ -69,11 +79,11 @@ var StepperItem = function StepperItem(_ref) {
   }, linkText));
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
     className: cn([className], {
-      'is-horizontal': isHorizontal,
       theme: theme,
-      align: align
+      align: align,
+      'is-horizontal': isHorizontal
     })
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showIcon && /*#__PURE__*/React.createElement("div", {
     className: cn('icon-button-area')
   }, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
     className: cn('icon-button', [iconButtonClassName]),
@@ -84,6 +94,6 @@ var StepperItem = function StepperItem(_ref) {
     className: cn('icon')
   }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
     className: cn('separator')
-  })), hasContent && renderContent);
+  })), showContent && renderContent);
 };
 export default StepperItem;

package/dist/es/index.d.ts

@@ -17,6 +17,8 @@ export { default as ButtonsBox } from './components/ButtonsBox/ButtonsBox';
 export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
+export { default as ChipBox } from './components/ChipsBox/ChipBox';
+export { default as ChipsBox } from './components/ChipsBox/ChipsBox';
 export { default as Container } from './components/Container/Container';
 export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
 export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';

package/dist/es/index.js

@@ -17,6 +17,8 @@ export { default as ButtonsBox } from "./components/ButtonsBox/ButtonsBox";
 export { default as Card } from "./components/Card/Card";
 export { default as CardsBox } from "./components/CardsBox/CardsBox";
 export { default as CarouselBox } from "./components/CarouselBox/CarouselBox";
+export { default as ChipBox } from "./components/ChipsBox/ChipBox";
+export { default as ChipsBox } from "./components/ChipsBox/ChipsBox";
 export { default as Container } from "./components/Container/Container";
 export { default as DarkGradientCard } from "./components/DarkGradientCards/components/DarkGradientCard";
 export { default as DarkGradientCards } from "./components/DarkGradientCards/DarkGradientCards";

package/dist/lib/components/ChipsBox/ChipBox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Chip } from '@megafon/ui-core';
+export type ChipBoxPropsType = Omit<React.ComponentProps<typeof Chip>, 'color' | 'checked'>;
+declare const ChipBox: React.FC<ChipBoxPropsType>;
+export default ChipBox;

package/dist/lib/components/ChipsBox/ChipBox.js

@@ -0,0 +1,17 @@
+"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"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+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; }
+/* eslint-disable react/no-unused-prop-types */
+
+var ChipBox = function ChipBox(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+var _default = exports["default"] = ChipBox;

package/dist/lib/components/ChipsBox/ChipsBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chips-box__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.mfui-chips-box__panel{display:none}.mfui-chips-box__panel_current{display:block}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Chips } from '@megafon/ui-core';
+import { ChipBoxPropsType } from './ChipBox';
+import './ChipsBox.scss';
+export type ChipsItemsPropsType = React.ComponentProps<typeof Chips>['items'];
+export type ChipBoxChildrenType = Array<React.ReactElement<ChipBoxPropsType>>;
+export type ChipsBoxPropsType = Omit<React.ComponentProps<typeof Chips>, 'items'> & {
+    /** Рендер содержимого только для текущего варианта */
+    renderOnlyCurrentPanel?: boolean;
+    /** Дочерние элементы */
+    children: ChipBoxChildrenType;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+};
+declare const ChipsBox: React.FC<ChipsBoxPropsType>;
+export default ChipsBox;

package/dist/lib/components/ChipsBox/ChipsBox.js

@@ -0,0 +1,85 @@
+"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"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-chips-box');
+var ChipsBox = function ChipsBox(_a) {
+  var _b;
+  var _a$renderOnlyCurrentP = _a.renderOnlyCurrentPanel,
+    renderOnlyCurrentPanel = _a$renderOnlyCurrentP === void 0 ? false : _a$renderOnlyCurrentP,
+    _a$isScrollable = _a.isScrollable,
+    isScrollable = _a$isScrollable === void 0 ? true : _a$isScrollable,
+    rootRef = _a.rootRef,
+    children = _a.children,
+    value = _a.value,
+    onChange = _a.onChange,
+    chipsProps = __rest(_a, ["renderOnlyCurrentPanel", "isScrollable", "rootRef", "children", "value", "onChange"]);
+  var childArray = React.Children.toArray(children).filter(function (child) {
+    return /*#__PURE__*/React.isValidElement(child);
+  });
+  var chipsItems = childArray.map(function (child) {
+    return (0, _extends2["default"])((0, _extends2["default"])({}, child.props), {
+      children: null
+    });
+  });
+  var _React$useState = React.useState(value || ((_b = chipsItems[0]) === null || _b === void 0 ? void 0 : _b.id)),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    currentId = _React$useState2[0],
+    setCurrentId = _React$useState2[1];
+  var panels = childArray.map(function (child) {
+    var props = child.props;
+    var id = props.id,
+      panel = props.children;
+    var isCurrentPanel = currentId === id;
+    if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: cn('panel', {
+        current: isCurrentPanel
+      })
+    }, panel);
+  });
+  var handleChange = React.useCallback(function (id) {
+    setCurrentId(id);
+    onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(_uiCore.Chips, (0, _extends2["default"])({}, chipsProps, {
+    value: currentId,
+    items: chipsItems,
+    isScrollable: isScrollable,
+    onChange: handleChange
+  }))), panels);
+};
+var _default = exports["default"] = ChipsBox;